一.子組件向父組件傳遞數據
方法:子組件綁定子組件的自定義事件,但事件處理函數綁定父組件的方法
1.<child @change="parent-method" @click="add"></child>
2.在子組件內部調用自定義事件
methods:{
? ?add(){
? ? ? ?this.$emit("parent-method",5) ? ? //這個5是參數,向事件處理函數傳遞
}
}
3.然后父組件的事件處理函數 就會調用,可以操作自身數據和接收傳過來的數據
methods:{
? ?parent-method(參數){ ? ?//接收傳遞過來的參數?
? ?console.log(arguments)// ? ?不寫在上面,一般在參數列表的arguments[0]
}
}
二.非父子之間的通信
1.方法:利用Vue的第三方實例在兩個組件中傳遞數據
var vm=new Vue(); ? ? //第三方實例
2.現在接收方的聲明周期的鉤子函數中注冊事件
var zujian1={
? created(){
? ? ?vm.$on("事件名",(參數)=>{ ? //接收的參數,arguments[0],可以傳對象
? ? ? ? ? ?//這個事件處理函數要寫箭頭函數,這樣this才能指向zujian1的Vue實例
})
}
}
3.發送方觸發事件并傳遞參數
var zujian2={
? ?methods:{
? ? ? vm.$emit("事件名",參數);
}
}
三.子組件中的事件分發
一般來說,子組件在頁面標簽中是不能寫內容的
如:
<child>sdfdshfdsaf</child>
這里面的內容會被模板替換掉,寫了沒什么作用,但是我們可以用slot(插槽)來在里面寫東西傳到模板中去
如:
var child={
? ?template:`
<slot name="head"></slot>
<slot>默認</slot> ?//這樣用標簽中寫了的內容會放入
`,
}
標簽:
<child>
<div slot="head"></div> ? //會替換<slot name="head"></slot>
內容 ? ? //會放入<slot></slot>
</child>