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

一、父組件與子組件之間值傳遞步驟如下：

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

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

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

2、在子組件使用 props 來接受父組件傳過來數據（props:['title']），如果是多個就定義多個屬性就可以

 

完整代碼如下：

1、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>

2、Header.vue（子組件）代碼如下：

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

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

    }
    ,props:['title']
}

</script>

 2、除了傳遞屬性以外還能傳遞方法和父組件的對象，如果是傳遞父組件的對象，那么在子組件里就能通過父組件對象獲取屬性和方法、數據

代碼如下：

父類組件代碼如下：

<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>

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

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

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

2、在父類通過

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

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

 

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

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

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