非父子组件传递方法

在初始化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)=>{
    // 处理数据
})

猜你喜欢

转载自www.cnblogs.com/zhx119/p/11432971.html