vue bus用法

Vue Bus 是一个基于Vue.js的事件总线，可以在应用的任何地方传递数据。它可以实现组件之间的通信，而不需要通过props或emit方式。Vue Bus可以理解为一个全局事件中心，我们可以在其中定义事件，然后在任何组件中触发该事件，从而实现组件之间的数据传递。

使用Vue Bus的步骤如下：

1. 安装Vue Bus

可以通过npm进行安装，命令如下：

npm install vue-bus --save

2. 在main.js中引入并注册Vue Bus

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

3. 在需要传递数据的组件中，使用$bus.$emit(eventName, data)方法触发事件，并传递数据。

methods: {
   handleClick() {
      this.$bus.$emit('eventName', data);
   }
}

4. 在需要接收数据的组件中，使用$bus.$on(eventName, callback)方法监听事件，并处理数据。

created() {
   this.$bus.$on('eventName', this.handleEvent);
},
methods: {
   handleEvent(data) {
      //处理数据
   }
}

需要注意的是，在组件销毁时，应该使用$bus.$off(eventName)方法取消对事件的监听，以避免内存泄漏。

Vue Bus是一种非常方便的组件通信方式，但也应该避免过度使用，以免导致代码难以维护。在合适的情况下，使用props和emit也是很好的组件通信方式。