vue里怎么使用event bus (vue里怎么使用事件总线)

Yongqiang Chen

于 2021-08-09 09:20:36 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏：学习篇文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Calvin_qiang/article/details/119530477

学习篇专栏收录该内容

36 篇文章

订阅专栏

博客主要介绍了Vue里使用事件总线（Event Bus）的相关内容，给出了两种使用事件总线的方式示例，帮助开发者了解在Vue中如何运用事件总线进行开发。

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

vue里怎么使用event bus (vue里怎么使用事件总线)，示例：

第一种方式：

//新建bus.vue
<script>
    import Vue from 'vue'
    export default new Vue({
        name: 'bus',
        data(){
            return {}
        }
    })
</script>

//在vue文件里使用
import Bus from './bus.vue';
Bus.$emit("getTableTitle", this.tableTitle);
Bus.$on("getTableTitle", (msg) => {
    console.log(msg)
});

第二种方式：

/*直接新建一个js文件,event-bus.js文件,内容如下*/
import Vue from 'vue'
export const EventBus = new Vue()

/*在vue文件里使用*/
import { EventBus } from './components/event-bus.js';
//注册事件在methods里
EventBus.$emit("gobackHandle", param);
//监听事件在mounted里
this.$nextTick(()=>{
    EventBus.$on("gobackHandle", (data)=> {
        console.log(data)
    })
})