vue2.0 中央控制总线 Bus

你的眼睛會笑2023-12-03 3:08

vue2.0 中央控制总线 Bus

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

javascript 复制代码

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

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

javascript 复制代码

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

事件监听 （B组件）

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

    // 对方法进一步的处理
	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);
			}
		}
	}
	// ...............................