在Vue中組件實例之間的作用域是孤立的，以為不能直接在子組件上引用父組件的數(shù)據(jù)，同時父組件也不能直接使用子組件的數(shù)據(jù)
情景1，父組件中調(diào)用子組件的方法并向子組件傳參——ref
聲明下面說的是vue 2.0的
1、當(dāng)ref直接定義在dom元素上時，則通過this.$refs.name可以獲取到dom對dom進(jìn)行原生的操作
//父組件
<component-son ref="firstson"></component-son>
//子組件component-son內(nèi)定義一個方法供父組件調(diào)用，例如 init
init: function(value) {
//在這里獲取到父組件傳過來的參數(shù)
},
通過this.$refs獲取到dom進(jìn)行操作（注意ref屬性的命名不能用駝峰，同時獲取的時候也是）
父組件中調(diào)用子組件的方法并向子組件傳參
this.$refs.firstson.init(a);
//子組件的init方法會調(diào)用一次并傳遞參數(shù)a
情景2，子組件觸發(fā)父組件的方法并傳遞參數(shù)——emit
子組件通過this.$emit()派發(fā)事件，父組件利用v-on對事件進(jìn)行監(jiān)聽，實現(xiàn)參數(shù)的傳遞
//父組件 ? 自定義事件 hello
<component-son @hello="fatherevent"></component-son>
//子組件
this.$emit('hello',{});
//向父組件派發(fā)事件，同時傳遞參數(shù){},后面的參數(shù)的個數(shù)不限
//父組件的fatherevent方法將會執(zhí)行
情景3，父組件向子組件動態(tài)傳值——props
//父組件
<component-son ??:messageProp="sendProp"></component-son>
data{
sendProp:'',
}
//子組件
props: {
messageProp: String,
},
父組件的參數(shù)sendProp改變，子組件的參數(shù)? this.messageProp同時改變
注意：
1、傳遞參數(shù)時要用—代替駝峰命名，HTML不區(qū)分大小寫
2、sendProp要在父組件的data中定義，例如 sendProp:''
3、messageProp在子組件的props中聲明類型，例如 messageProp: String
4、在利用props實現(xiàn)傳值的過程中理論上是要實現(xiàn)單向傳遞，即父組件改變相關(guān)參數(shù)的值，子組件也相應(yīng)變化，但是子組件對參數(shù)的改變不應(yīng)該影響父組件。但是當(dāng)props中接收的是父組件傳遞的引用類型（對象或者是數(shù)組）時，在子組件中對數(shù)據(jù)改變時，父組件中的數(shù)據(jù)也會相應(yīng)的改變，因為兩者是指向的同一地址內(nèi)存。如果不想子組件的改變影響父組件可以利用深拷貝，將接受的數(shù)據(jù)進(jìn)行深拷貝后在子組件中使用，而不直接操作接受的數(shù)據(jù)。
如果幫到了你，請點贊！
