VUE框架CLI组件化组件绑定自定义事件时回调函数的this对象------VUE框架
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>
前往低代码交流专区
更多推荐
21
0- 0
已为社区贡献2条内容
所有评论(0)