VUE框架CLI组件化全局事件总线实现原理——VUE框架

	

		
		
		
		
		你好
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	

 

import User from "./components/User.vue"
export default {
	name : "App",
	components : {User},
	mounted(){
		// 当我们的函数是箭头函数,函数的this对象也是父类对象App的vc
		// 如何判断箭头函数的执行者this呢?首先明确,箭头函数没有this
		// 箭头函数执行时需要向外找,上一级的this就是它的this
		this.$refs.user.$on("event1",() => {console.log(this);});
		// 这个也是被触发的当前vc实例,不是app的vc实例
		console.log("mo" + this.$refs.user);
		// 当我们的函数是普通函数,函数体的this是当前vc实例,不是APP组件实例
		this.$refs.user.$on(服务器托管网"event1",function(){console.log(this);})
		// 获取组件
		// 给ref=user的组件绑定event1事件,并且给event1这个事件绑定一个回调函数doSom服务器托管网e()
		// 以传参的形式让父类执行,this就变成了App这个父类实例
		this.$refs.user.$on("event1",this.doSome);
		this.$refs.user.$on("event2",this.doOther);
		// 如果这里的函数是普通的函数function
		// 或者是箭头函数,应该怎么处理
		// 仅一次的设置方式
		this.$refs.user.$once("event1",this.doSome);
	},
	methods : {
		Hello(){
			console.log("Hello Vue");
		},
		// doSome(name,age,gender){
		// 	console.log(name,age,gender)
		// }
		// 不确定个数,后期拓展写法
		// 仅限ES6的新语法...params
		doSome(name,...prams){
			console.log(name,prams);
			console.log(this);
		},
		doOther(){
			console.log("doOther");
		}
	}
}

 

 

    

        
        
        
        
        
        触发event1事件
        触发event2事件
        解除绑定
        
        销毁VUE实例
    
 
 

export default {
    name : "User",
    methods : {
        triggerEvent1(){
            console.log("tr" + this);
            // 触发事件的方法
            // 代码意思是触发event1这个事件
            // this是当前的组件实例
            // $emit就是触发爆发
            // 这个this是当前vc实例
            this.$emit('event1',this.name,this.age,this.gender);
        },
        triggerEvent2(){
            this.$emit("event2");
        },
        // 解除绑定
        unbinding(){
            // 仅仅解绑this绑定的event1事件
            // this.$off('event1');
            // 全部解绑写法
            // this.$off();
            // 解绑多个写法
            this.$off(["event1","event2"]);
        },
        goodbye(){
            // 销毁完,全部的绑定效果全部失效
            this.$destroy();
        }
    },
    data(){
        return {
            name : "张三",
            age : 20,
            gender : "男"
        }
    }
}