在初始化web app的时候,main.js给data添加一个 名字为eventhub 的空vue对象。就可以使用 this.$root.eventHub 获取对象。
new Vue({ el: '#app', router, render: h => h(App), data: { eventHub: new Vue() } })
在组件内调用事件触发
//通过this.$root.eventHub获取此对象 //调用$emit 方法 this.$root.eventHub.$emit('eventName', data)
在另一个组件调用事件接受,移除事件监听器使用$off方法。
this.$root.eventHub.$on('eventName', (data)=>{ // 处理数据 })