Vue父子組件通信（父級向子級傳遞數據、子級向父級傳遞數據、Vue父子組件存儲到data數據的訪問）
一、父級向子級傳遞數據【Prop】：
● Prop：子組件在自身標簽上，使用自定義的屬性來接收外界（也可以是父組件）的數據，然后將數據接收到prop中。【接收父組件的數據—動態Prop，需要v-bind綁定屬性，數據可以從vue實例中獲取】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html暫時不支持駝峰寫法</title> </head> <body> <div id="app"> <!-- 子組件要或者外界（例如也可以是父組件）的數據，它是需要在自身標簽上，使用props中自定義的屬性來接收， 若是想接收的數據來自父組件【Vue實例】------通過綁定屬性（數據可以從vue實例中獲取） --> <!--靜態的prop--> <cpn c-info="info"></cpn><br/> <!--動態prop--> <cpn :c-info="info"></cpn> </div> <template id="cpn"> <div> <h1>cpn的內容</h1> <ul> <li v-for="item in cInfo">{{item}}</li> </ul> </div> </template> </body> <script type="text/javascript" src="./js/vue.min.js"></script> <script> const cpn = { template: `#cpn`, props:{ cInfo: { type: Object, default(){ return {} } } }, } let app = new Vue({ el: '#app', data: { message:'動態綁定屬性v-bind', abc: { id: '1', name: '父類的info中的name', age: '1' }, info: { id: '1', name: '父類的info中的name', age: '15' } }, components: { cpn } }); </script> </body> </html>
二、子級向父級傳遞數據【emit】：
● 子組件通過$emit(‘自定義事件名’, 數據變量)向父組件發送消息，在子組件進行自定義的事件進行監聽【監聽調用的函數可以直接通過一個自定義的參數接收到數據變量】
<!-- 父組件 -->
<div id="app">
<!-- 子組件上監聽到自定義的事件的同時，也監聽到發送的數據num，事件指向的函數，通過自定義一個參數value可以直接拿到數據num -->
<cpn :c-info="info" @item-click="itemClick"></cpn>
</div>
<!-- 子組件的模板 -->
<template id="cpn">
<div>
<h1>子組件的模板</h1>
<button v-for="item in cInfo" @click="btnClick(item)">{{item}}</button>
</div>
</template>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
const cpn = {
template: `#cpn`,
data(){
return{
num: 99
}
},
props:{
cInfo: {
type: Object,
default(){
return {}
}
}
},
methods: {
btnClick(item){
console.log('子組件接收到父組件傳遞的數據' + item);
//$emit的第一個參數是自定義的事件名稱和發送數據num
this.$emit('item-click', this.num);
}
}
}
let app = new Vue({
el: '#app',
data: {
info: {
id: '1',
name: 'yile',
age: '15'
}
},
methods: {
itemClick(value){
console.log('父組件監聽到子組件發出的事件和接收到子組件的數據' + value);
}
},
components: {
cpn
}
});
</script>
三、Vue父子組件存儲數據的訪問：
（1）父組件訪問子組件data中存儲的數據：使用$children或 $refs （注意：this.$children得到的是一個數組，包含所有子組件對象。）
（2）$refs的使用：
■ $refs和ref指令通常是一起使用的
■ 首先，我們通過ref給某一個子組件綁定一個特定的ID
■ 其次，通過this.$refs.ID就可以訪問到該組件了
