vue中组件间 的传值 bus(vueBus公共交通)

前言：vue中组件间 的传值 bus(vueBus公共交通)

在vue中，有父子组件，兄弟组件，爷孙组件，毫无关系组件等
页面之间需要传递数据（也可以使用Vuex）或触发方法，那么这时就希望有个公共的东西来及时通知，Bus 就可以很好地解决这个问题！

第一步：创建 vueBus.js文件（在utils目录下）

// vueBus.js
import Bus from 'vue';
let install = function (Vue) {
  Vue.prototype.$bus = new Bus()
}
export default { install };

第二步：在main.js中引入vueBus

// main.js
import vueBus from '@/utils/vueBus';
Vue.use(vueBus);

第三步：在.vue文件中使用 $bus

B页面——A页面，B向A传递事件

1. 在B页面 发送，在方法中$emit发送监听事件，并改变值

// this.$bus.$emit('事件名称', 值)

this.$bus.$emit('updateShowSide', false)

2. 在A页面 接收后，销毁事件，mounted中 $on 接收数据，destroyed中$off销毁监听事件

mounted() {
    this.$bus.$on('updateShowSide', data => {
        this.showSide = data
    })
},

destroyed() {
    this.$bus.$off("updateShowSide");
},