面試vue元件間事件派發與接收

在vue的開發中，經常會在兩個元件間進行事件的通訊

在vue1.0中我們使用$dispatch 和 $broadcast

child.vue:

this.$dispatch('eventName',this.data);
複製程式碼

parent.vue:

event:{
 'eventName':function(data) {
 // 執行的方法
 }
}
複製程式碼

但是在vue2.0中$dispatch 和 $broadcast被棄用，因為基於元件樹結構的事件流方式實在是讓人難以理解，並且在元件結構擴充套件的過程中會變得越來越脆弱,並且這隻適用於父子元件間的通訊。官方給出的最簡單的升級建議是使用集中的事件處理器,而且也明確說明了 一個空的vue例項就可以做到,因為Vue 例項實現了一個事件分發介面

在vue2.0中在初始化vue之前，給data新增一個 名字為eventhub 的空vue物件

new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
 eventHub: new Vue()
 }
})
複製程式碼

某一個元件內呼叫事件觸發

this.$root.eventHub.$emit('eventName', event.target);
複製程式碼

另一個元件內呼叫事件接收, 在元件銷燬時接除事件繫結,使用$off方法

created() {
 this.$root.eventHub.$on('eventName',(target) => {
 this.functionName(target)
 });
},
method:{
 functionName(target) {
 console.log(target);
 }
}複製程式碼