vue2-非父子组件通信-自定义事件

hi修修

于 2018-05-07 23:05:08 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript vue2 文章标签： vue

本文链接：https://blog.youkuaiyun.com/li522021642/article/details/80233188

9 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍如何在Vue项目中通过创建一个全局的Vue实例作为事件总线，实现组件间的通信。包括定义事件总线、触发事件、监听事件及取消监听的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在组件中使用

1.在main.js中定义一个空的vue实例，在data中定义一个 Bus:new Vue()

new Vue({
    el: '#app',
    data:{
        Bus: new Vue()
    },
    router: router,
    render: h => h(App)
})

2.在任意组件中发起自定义事件

myEmit(){
    this.$root.Bus.$emit('test-click', 123)
}

this.$root.Bus.$emit('test-click', {name:'Timo',height:'1.5'})

3.在任意组件中，接收自定义事件

mounted(){
    this.$root.Bus.$on('test-click', val => {
    console.log(val)
    })
}

4.在不需要的时候，我们最好删掉这个自定义事件

delEmit(){
    this.$root.Bus.$off('test-click')
}