解决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();

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

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

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