Vue 父組件與子組件之間傳值

1、父組件與子組件之間值傳遞步驟以下：

例如：我有一個父組件Myhome.vue 和一個子組件Header.vue

一、父組件調用子組件的時候，動態綁定屬性值

 <v-myheader :title="title"></v-myheader> 

二、在子組件使用 props 來接受父組件傳過來數據（props:['title']），若是是多個就定義多個屬性就能夠

 

完整代碼以下：

一、Myhome.vue(父組件)代碼以下：

<template>
<div id="homeapp">
<h1>這是一個home123</h1>
 <v-myheader :title="title"></v-myheader> 
 </div>
</template>

<script>
import MyHeader from './Header.vue';
export default {
   name:'myhome',
    data () {
        return {
         title:'父類數據'
        }
    }
    ,components :{
        'v-myheader':MyHeader
    }

}
</script>

二、Header.vue（子組件）代碼以下：

<template>
<div id="headerapp">
<h3>這是頭部組件（子組件）</h3>
<h2>父類數據--{{title}}</h2>
</div>
</template>

<script>
export default {
    data() {
        return {
          msg:'mgs'
        }
    },methods:{

    }
    ,props:['title']
}

</script>

 二、除了傳遞屬性之外還能傳遞方法和父組件的對象，若是是傳遞父組件的對象，那麼在子組件裏就能經過父組件對象獲取屬性和方法、數據

代碼以下：

父類組件代碼以下：

<template>
<div id="homeapp">
<h1>這是一個home123</h1>
 <v-myheader :title="title" :show='show' :home="this"></v-myheader> 
 </div>
</template>

<script>
import MyHeader from './Header.vue';
export default {
   name:'myhome',
    data () {
        return {
         title:'父類數據'
        }
    }
    ,methods:{
        show(a) {
            alert('我是父組件方法'+a);
        }
    }
    ,components :{
        'v-myheader':MyHeader
    }

}
</script>

其中:

:show='show'->表示傳遞方法
:home="this"->表示傳遞父類實例對象

子組件代碼以下：

<template>
<div id="headerapp">
<h3>這是頭部組件（子組件）</h3>
<h2>父類數據--{{title}}</h2>
<button @click="show(123)">調用父類方法</button>
<button @click="getparentdata()">獲取父組件數據和方法</button>
</div>
</template>

<script>
export default {
    data() {
        return {
          msg:'mgs'
        }
    },methods:{
        getparentdata (){
            alert(this.home.title);
        }

    }
    ,props:['title','show','home']
}

</script>

 3、父組件主動獲取子組件的方法和屬性

一、調用子組件的時候定義一個ref

v-myheader ref="header"></v-myheader>

二、在父類經過

屬性獲取：this.$refs.header.屬性

方法獲取：this.$refs.header.方法

 

4、子組件主動獲取父組件方法和屬性

屬性獲取：this.$parent.屬性

方法獲取：this.$parent.方法