由于vue2.0 移除了1.0中的broadcast 这两个组件之间通信传递数据的方法 ,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例
就可以做到,因为Vue 实例实现了一个事件分发接口.
请直接看代码,在初始化web app的时候,给data添加一个 名字为eventhub 的空vue对象
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
eventHub: new Vue()
}
})
好的 这个时候 你就可以一劳永逸了,在任何组件都可以调用事件发射 接受的方法了.
如何获取到这个空的vue对象 eventhub呢.在组件里面直接调用这个
某一个组件内调用事件触发
//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)
另一个组件内调用事件接受,当然在组件销毁时接触绑定,使用$off方法
this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData)=>{
handle(yourData)
} )
原文链接:https://blog.csdn.net/a5534789/article/details/53415201