解决vue全局事件总线bus反复调用的问题

解决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反复调用的问题：

1. 首先创建创建一个全局事件总线 bus.vue

//bus.js作为公共数控中央总线  完成非父子组件之间的通信工作
import Vue from "vue";
export default new Vue();

1. 创建组件 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>

最后执行运行程序反复切换组件验证我们需要的得到的现象：

通过反复切换组件可看到，我们组件中预置的标志位一直保持不变，并且全局事件总线在单次访问组件时，也只被执行一次。

• 点赞
• 收藏
• 分享
• 文章举报