在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);
}
}