VUE框架CLI组件化组件绑定自定义事件时回调函数的this对象------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)})
		// 当我们的函数是普通函数,函数体的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>

        <!-- 内置函数的实现步骤 -->

        <!-- 提供事件源,给事件源绑定事件,编写回调函数,将回调函数和事件进行绑定 -->

        <!-- 等待事件的触发,事件触发执行回调函数 -->

        <!-- 组件的自定义事件实现步骤 -->

        <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)})

        // 当我们的函数是普通函数,函数体的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>
        <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(){
            // 触发事件的方法
            // 代码意思是触发event1这个事件
            // this是当前的组件实例
            // $emit就是触发爆发
            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>

<template>

    <div>

        <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(){

            // 触发事件的方法

            // 代码意思是触发event1这个事件

            // this是当前的组件实例

            // $emit就是触发爆发

            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>