vue中bus的用法及bus.$on重复触发问题总结

bus介绍：

1. vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。

2. bus适合小项目、数据被更少组件使用的项目；如果是大中型项目，数据更多的情况下，使用bus传参就不合适了。

3. bus其实就是一个发布订阅模式，利用vue的自定义事件机制

bus使用：

1.先创建bus.js文件

// bus.js文件
import Vue from 'vue'
export default new Vue()

2.创建完成之后再引用，这里有两种引用，局部引用和全局引用：

// 2.1 局部引用：是在对应的组件的文件里面引用bus.js文件
<script>
import bus from "./bus.js";
export default{
	data() {
		return{}
	},
	mounted(){
	    bus.$on("getBus", (val) => { 
	      console.log(568, val);
	    });
	}
}
</script>
// 2.2 全局引用：是在main.js里面直接引用
import bus from '../src/bus'  // 引入刚才创建的bus.js文件
Vue.prototype.$bus = bus

以上就是关于vue项目中bus的创建和引用，现在总结一下如何使用以及会遇到的坑

需求：a页面通过点击按钮传值到对应的b页面，并且在b页面的mounted获得参数之后进行相关的参数处理（比如触发对应接口）

3 .在a页面中点击按钮之后通过$emit分发事件传参到b页面：

 <!-- a页面 -->
 <el-button size="medium"  @click="extractFnc()" >传值到b页面</el-button>
  extractFnc() {
   bus.$emit("getBus", {
     code: '111',
     message:'b页面'
   });
  },

4.在b页面中$on监听a页面刚才触发的事件：

<!-- b页面 -->
  mounted() {
    bus.$on("getBus", (val) => { 
      console.log(568, val);
    });
  },

以上就简单的通过bus实现了非父子组件之间通信。

需要留意的坑：

页面a分发的事件，页面2监听。我们通常把页面2监听写在钩子函数created或mounted中，当页面2被销毁时，比如切换组件，再次切换到页面2时，写在钩子函数中的on事件又监听了一次，这就造成了重复监听。后果就是页面1分发了一次事件，而页面2因为绑了多个$on监听，就会重复执行函数体。

如图所示：第一次点击按钮的时候，总共打印了1次

在刚才的基础上不刷新页面，直接第二次点击按钮，总共打印了2次

5.bus.$on重复触发解决办法：

a. 在组件下次触发on之前，用$off取消下绑定

b. 通常绑定在钩子函数beforeDestroy()或者destroyed()中，如果使用了keep-alive包裹，可以写在deactivated钩子函数中。

beforeDestroy() {
  bus.$off('getBus')
}，

以上所述：就是bus在vue项目中的使用，特别是最后一步值的留意！