vue Bus 全局事件实现跨组件通信

hyduan200

已于 2022-03-29 14:53:24 修改

阅读量1.8k

点赞数 2

分类专栏： vue 前端小技巧 js 文章标签： vue.js javascript 前端

于 2022-03-29 09:53:26 首次发布

本文链接：https://blog.csdn.net/duanhy_love/article/details/123811974

版权

前端小技巧同时被 3 个专栏收录

48 篇文章 7 订阅

订阅专栏

42 篇文章 1 订阅

订阅专栏

vue

40 篇文章 7 订阅

订阅专栏

前言

本文demo实现效果如图

demo分为左侧菜单栏与顶部菜单栏
点击顶部菜单栏箭头图标实现左侧菜单折叠

vue2

方法一

在main.js中全局注册----vue Bus总栈

new Vue({
    el: '#app',
    router,
    store, //使用store vuex状态管理
    components: { App },
    template: '<App/>',
    data: {
        // 空的实例放到根组件下，所有的子组件都能调用
        Bus: new Vue()
    }
})

事件注册及调用

// 事件监听---在created或者mounted中
this.$root.Bus.$on('事件名称', value => {}）
// 发送事件
this.$root.Bus.$emit("事件名称",发送数据对应上面的value);
// 例子：使用数据总线，在非父子的组件之间通讯，完成左侧菜单折叠
 this.$root.Bus.$on('toggle', value => {
   this.collapsed = !value
 })
 this.$root.Bus.$emit('toggle', this.collapsed)

其他

// 事件关闭
this.$root.Bus.$off("exportschre");
// 事件开启
this.$root.Bus.$on('exportschre', value => {
}）

方法二

安装依赖vue-bus

npm install vue-bus
or
cnpm install vue-bus

main.js引入

import VueBus from 'vue-bus'
Vue.use(VueBus)

事件注册及调用

// 事件监听---在created或者mounted中
this.$bus.on('事件名称', value => {}）
// 发送事件
this.$bus.emit("事件名称",发送数据对应上面的value);
// 例子：使用数据总线，在非父子的组件之间通讯，完成左侧菜单折叠
  this.$bus.on("toggle",value=>{ 
    this.collapsed = !value    	 
  }); 
  this.$bus.emit("toggle",this.collapsed)

vue3

Vue3.x以后从实例中移除了 $o n ，$ off 和 $o n c e 方法，$ emit 仍然是现有 API 的一部分，只能实现子组件触发父组件的方法，
vue的bus无法使用，可借用第三方插件mitt实现跨组件传值

安装依赖mitt

npm install --save mitt
or
cnpm install --save mitt

新建utils/event.js

import mitt from 'mitt'
const VueEvent = mitt();
export default VueEvent;

在所需页面调用VueEvent

import VueEvent from '@/utils/event'

事件注册及调用

// 事件监听---在created或者mounted中
VueEvent.on('事件名称', value => {}）
// 发送事件
VueEvent.emit("事件名称",发送数据对应上面的value);
// 例子：使用数据总线，在非父子的组件之间通讯，完成左侧菜单折叠
  VueEvent.on("toggle",value=>{ 
    this.collapsed = !value    	 
  }); 
  VueEvent.emit("toggle",this.collapsed)