非父子组件传递方法

Posted 2022-09-10 zhx119

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了非父子组件传递方法相关的知识，希望对你有一定的参考价值。

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

以上是关于非父子组件传递方法的主要内容，如果未能解决你的问题，请参考以下文章