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

<template>
	<div>
		<!-- 内置函数的实现步骤 -->
		<!-- 提供事件源,给事件源绑定事件,编写回调函数,将回调函数和事件进行绑定 -->
		<!-- 等待事件的触发,事件触发执行回调函数 -->
		<!-- 组件的自定义事件实现步骤 -->
		<button @click="Hello()">你好</button>
		<!-- 给User组件绑定自定义事件 -->
		<!-- 全称写法v-on:事件名称简写为@事件名 -->
		<!-- 对于组件自定义事件来说,要想让事件发生,就需要执行一段代码 -->
		<!-- 这段代码负责触发这个事件,让这个事件发生 -->
		<!-- 这个事件绑定在这个VC上 -->
		<User v-on:event1="doSome" @event2="doOther"></User>
		<!-- 简写形式 -->
		<!-- 事件绑定在哪个组件上,触发事件的代码就在哪个组件上编写 -->
		<User @event1="doSome" @event2="doOther"></User>
		<!-- 总结到目前,父子组件如何通信 -->
		<!-- props传值(父组件向子组件),自定义事件(子组件向父组件) -->
		<!-- 在父组件中定义一个方法,将方法传递给子,然后在子组件中触发这个方法,并传递参数 -->
		<!-- 第二种方法,也是更常用的,使用组件自定义事件的方式,也可以完成子向夫传数据 -->
		<!-- 在父组件绑定事件,在子组件触发事件 -->
		<!-- 子组件传递父组件是,父组件绑定,子组件触发(父绑定,子触发) -->
		<User ref="user"></User>
	</div>
</template>
 
<script>
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这个事件绑定一个回调函数doSome()
		// 以传参的形式让父类执行,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");
		}
	}
}
</script>
 
<style>
 
</style>

<template>
    <div>
        <!-- 作为一个VC对象,就有$on方法(用于绑定事件)和$emit(用于触发事件)方法 -->
        <!-- 如果是A传数据给B,就是b绑定事件,a触发事件,在方法中传递数据 -->
        <!-- 全局事件总线原理是 -->
        <!-- 创建一个全局的vc对象,利用vc对象都有的$on和$emit -->
        <!-- 传递数据的组件上绑定这个全局vc的$on,而提供数据的组件触发这个全局vc的$emit即可 -->
        <button @click="triggerEvent1()">触发event1事件</button>
        <button @click="triggerEvent2()">触发event2事件</button>
        <button @click="unbinding">解除绑定</button>
        <!-- vue实例销毁的时候,会把我们实例上绑定的事件全部解绑 -->
        <button @click="goodbye()">销毁VUE实例</button>
    </div>
</template> 
 
<script>
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 : "男"
        }
    }
}
</script>
 
<style>
 
</style>