一.子組件向父組件傳遞數(shù)據(jù)
方法:子組件綁定子組件的自定義事件较店,但事件處理函數(shù)綁定父組件的方法
1.<child @change="parent-method" @click="add"></child>
2.在子組件內(nèi)部調(diào)用自定義事件
methods:{
? ?add(){
? ? ? ?this.$emit("parent-method",5) ? ? //這個(gè)5是參數(shù),向事件處理函數(shù)傳遞
}
}
3.然后父組件的事件處理函數(shù) 就會(huì)調(diào)用容燕,可以操作自身數(shù)據(jù)和接收傳過(guò)來(lái)的數(shù)據(jù)
methods:{
? ?parent-method(參數(shù)){ ? ?//接收傳遞過(guò)來(lái)的參數(shù)?
? ?console.log(arguments)// ? ?不寫(xiě)在上面梁呈,一般在參數(shù)列表的arguments[0]
}
}
二.非父子之間的通信
1.方法:利用Vue的第三方實(shí)例在兩個(gè)組件中傳遞數(shù)據(jù)
var vm=new Vue(); ? ? //第三方實(shí)例
2.現(xiàn)在接收方的聲明周期的鉤子函數(shù)中注冊(cè)事件
var zujian1={
? created(){
? ? ?vm.$on("事件名",(參數(shù))=>{ ? //接收的參數(shù)蘸秘,arguments[0],可以傳對(duì)象
? ? ? ? ? ?//這個(gè)事件處理函數(shù)要寫(xiě)箭頭函數(shù)官卡,這樣this才能指向zujian1的Vue實(shí)例
})
}
}
3.發(fā)送方觸發(fā)事件并傳遞參數(shù)
var zujian2={
? ?methods:{
? ? ? vm.$emit("事件名",參數(shù))醋虏;
}
}
三.子組件中的事件分發(fā)
一般來(lái)說(shuō)味抖,子組件在頁(yè)面標(biāo)簽中是不能寫(xiě)內(nèi)容的
如:
<child>sdfdshfdsaf</child>
這里面的內(nèi)容會(huì)被模板替換掉,寫(xiě)了沒(méi)什么作用灰粮,但是我們可以用slot(插槽)來(lái)在里面寫(xiě)東西傳到模板中去
如:
var child={
? ?template:`
<slot name="head"></slot>
<slot>默認(rèn)</slot> ?//這樣用標(biāo)簽中寫(xiě)了的內(nèi)容會(huì)放入
`,
}
標(biāo)簽:
<child>
<div slot="head"></div> ? //會(huì)替換<slot name="head"></slot>
內(nèi)容 ? ? //會(huì)放入<slot></slot>
</child>