解决vue全局事件总线bus反复调用的问题
引言:全局定义的事件是不会跟随组件的生命周期函数进行状态改变的。切换路由时,如果不手动清除事件的话,它会注册多次,导致内部的函数也会被多次运行。
在此之前先了解一下全局事件总线的使用:
mounted(){
Bus.$on('pagenow',function(val){
//当全局bus内的pagenow发生变化的时候 调用函数内部的程序
});
//为pagenow绑定一个全局事件总线
Bus.$emit('pagenow',123);
} ,
destroyed(){
console.log('通过Bus.$off在组件销毁的时候移除事件');
Bus.$off('pagenow');
},
接下来做个实验来验证如何解决vue全局事件总线bus反复调用的问题:
- 首先创建创建一个全局事件总线 bus.vue
//bus.js作为公共数控中央总线 完成非父子组件之间的通信工作
import Vue from "vue";
export default new Vue();
- 创建组件 test1.vue
<template>
<div name="test1">
<h1>我是组件1</h1>
</div>
</template>
<script>
import Bus from '../bus.js'
export default{
name: 'test1',
data(){
return{
num:0
}
},
beforeCreate(){
console.log('A组件beforeCreate')
} ,
created(){
console.log('A组件created');
},
beforeMount(){
console.log('A组件beforeMount')
} ,
mounted(){
console.log('A组件被mounted')
var vm=this;
Bus.$on('pagenow',function(val){
console.log(vm.num);
console.log("--------------------------我来到test1");
vm.num=vm.num+1;
});
Bus.$emit('pagenow',123);
} ,
beforeDestroy(){
console.log('A组件被beforeDestroy')
} ,
destroyed(){
console.log('A组件被destroyed')
Bus.$off('pagenow');
},
};
</script>
创建组件 test2.vue
<template>
<div name="test2">
<h1>我是组件2</h1>
</div>
</template>
<script>
import Bus from '../bus.js'
export default{
name: 'test2',
data(){
return{
num:0
}
},
beforeCreate(){
console.log('B组件beforeCreate')
} ,
created(){
console.log('B组件created')
},
beforeMount(){
console.log('B组件beforeMount')
} ,
mounted(){
console.log('B组件被mounted');
var vm=this;
Bus.$on('pagenow',function(val){
console.log(vm.num);
console.log("--------------------------我来到test1");
vm.num=vm.num+1;
});
Bus.$emit('pagenow',123);
} ,
beforeDestroy(){
console.log('B组件被beforeDestroy')
} ,
destroyed(){
console.log('B组件被destroyed')
Bus.$off('pagenow');
},
};
</script>
3.将两个组件添加至路由
import Vue from 'vue'
import Router from 'vue-router'
import test1 from '@/components/test1'
import test2 from '@/components/test2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/test1',
name: 'test1',
component: test1
},
{
path: '/test2',
name: 'test2',
component: test2
}
]
})
4.给 app.vue 添加路由切换
<template>
<div id="app">
<router-link to="/test1">Go to test1</router-link>
<router-link to="/test2">Go to test2</router-link>
<router-view/>
</div>
</template>
<script>
import test1 from './components/test1'
import test2 from './components/test2'
export default {
name: 'App',
components: {
test1:test1,
test2:test2
}
};
</script>
<style>
#app {
}
</style>
最后执行运行程序反复切换组件验证我们需要的得到的现象:
通过反复切换组件可看到,我们组件中预置的标志位一直保持不变,并且全局事件总线在单次访问组件时,也只被执行一次。