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

最新推荐文章于 2025-09-02 10:33:00 发布

原创最新推荐文章于 2025-09-02 10:33:00 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

学习篇专栏收录该内容

36 篇文章

订阅专栏

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

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)
    })
})