vue2.0 中央控制总线 Bus

vue2.0 中央控制总线 Bus

1. 废话不多说，直接上代码
2. main.js中 加入

// main.js
//创建中央控制总线  Bus
// 说白了就是new一个vue实例，将方法挂在上去
Vue.prototype.$event = new Vue();

3. 事件分发***（A组件中）***

	  // A组件中
	  // 事件分发
	  // 参数一  方法名
	  // 参数二  传递出去的参数
    methods: {
         clickFun(){
           this.$event.$emit('refreshFun',Math.random())
         },
       }

4. 事件监听 （B组件）

    // 事件监听
    mounted() {
	    this.$event.$on("refreshFun", (val) => {
	      console.log(val)   // 0.7022180283884656
	    });
	  },

5. 事件销毁***（A组件中）***

 beforeDestroy(){
   this.$event.off('refreshFun') 
 }

6. 一个简单的事件分发完成！
7. 当然你也可以在 （拓展 main.js ）

    // 对方法进一步的处理
	Vue.prototype.$event = new vue({
		data:{
		},
		methods:{
		    //绑定事件
			on(eventname,callback){
			   this.$on(eventname, callback);
			},
			//触发事件，传递数据
			emit(eventname,...arg){
			   this.$emit(eventname, ...args);
			},
			// 解绑
			off(eventname,callback){
			   this.$off(event, callback);
			}
		}
	}
	// ...............................