Vue EventBus踩坑总结
前提: vue 组件懒加载 ()=>import()这种方式引入组件
首次加载不触发，A组件emit,B组件on,当A组件触发事件加载B组件时，因为B组件还未加载，自然this.$root.bus.$emit监听不到B中的事件，也就触发不了。（如果不采用组件懒加载则没问题）
多次监听事件，因每次进入B组件都会on一次事件，这会类似于元素addEventListner一样，建立多次监听，故触发事件时会多次触发事件。
/* 需要每次销毁组件时取消监听 */
beforeDestroy: function () {
this.$root.Bus.$offV(['emitName1', 'emitName2'...])
}
A中emit,B和C中有相同名字的on,如 'init',当触发A时，组件由B改为C,此时触发的不是C中的init,而是B中的。
如果非懒加载引入，则会两个init都触发。
个人解决方案：
弃用Bus,当只是一个简单的传值或者不涉及到首次要触发事件时才使用。虽说不采用组件懒加载使用是没问题，但为了程序的优化，还是推荐组件懒加载。
A中改变数据，关联Vuex中数据，组件B、C中watch Vuex中数据有无改变，从而触发相应事件。
watch这种方式，首次是不触发的。B、C 如要实现首次即可触发，在watch中加参数immdiate: true即可。
当然还有蠢一点的方法，即mounted中主动触发一次事件。
// 例 ：
watch:{
serachValue:{
handler:"methodName" // 方法名
immediate:true // 默认是false
}
}
// 当然也可以这么写
watch: {
serachValue: {
immediate: true,
handler (newValue,oldValue) { //直接写方法
this.methodName()
}
}
}
watch这种方式如若newValue和oldValue相同，则不会触发handler。如若要实现不改变值也要触发事件怎么办。
/* Vuex中 部分代码 */
state: {
isCheck: 0,
watchIsCheck: 0, // 监测isCheck是否有被重新赋值,不管newValue是否等于oldValue,isCheck改变时，设值为时间戳用于保持唯一性，用于在组件中监听，从而实现不管之前是否是相同的，一样触发相应事件
},
mutations: {
changeIsCheck (state, val) {
state.watchIsCheck = new Date().getTime()
state.isCheck = val
}
}
/* 组件中 */
import {mapStates} from Vuex
// 此处忽略将mapstates注册的代码
watch:{
watchIsCheck(){
// 此时this.isCheck已经最新改变过的了，不管是否前后一样。
this.doSomething()
}
}
总结：总的来说，bus这个东西用来用去感觉不怎么好用。相较于Vuex，灵活性差很多。父子组件传值有自己的方式也用不到它。遇坑时问了一个vue的大牛,推荐我学provide和inject，错略看了下，比较高级的用法，还没有时间去学。
发表评论 (审核通过后显示评论)：