Vue中事件总线$bus的用法及$on$off和$emit的使用

Posted 2023-01-20 初辰ge

1.创建bus.js文件

import Vue from 'vue';
let Bus = new Vue();
export default Bus;

2.在main.js引入挂载到全局（或者组件内单独引入）

import bus from "./assets/js/bus.js";
Vue.prototype.$bus = bus;

3.在接收值的组件中绑定并在销毁前解绑

created() 
  this.$bus.$on('login', (e) => 
    this.dialogVisible = e
  )
,
beforeDestroy() 
  this.$bus.$off('login')
,

4.在发送值的组件中进行传值

this.$bus.$emit('login', true)