博客

前言

本文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

，

on，






o


n


，





off 和



o

n

c

e

方

法

，

once 方法，






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)