绑定自定义事件
说到 Vue 自定义事件,那就需要搞清楚一个问题,为啥有这个玩意。
说到自定义事件之前,需要理解 组件基础的概念。理解了基础概念之后,我们就知道 Vue 的父子之间的通信, 一是 父组件通过 Prop 向子组件传递数据 。二是 监听子组件事件。
具体详情参考之前的博文:Vue-父子组件传值。
vue-07-父子组件传值_vue handler(n) {}_白桃味稠鱼烧的博客-CSDN博客因为vue 的数据是单向流动的,这是为了避免数据污染。在官方文档中也说到:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。大致归纳一下:父传子--传值、子传父--传事件1、父传子如果传递的数据是对象格式的,那么在子组件 内部监..._vue handler(n) {}https://blog.csdn.net/qq_40792800/article/details/105559859这篇博文中详细说明了 父子组件传值的方法,其中就有 子组件传递数据给父组件的三种方法,其实就是 通过自定义事件 来实现的。实现方法也在其中详细说明了。
$off:解绑自定义事件
上面说过了 通过绑定自定义事件,实现了子组件向父组件传递数据,那么既然有绑定方法,就应该和原生js一样,有解绑的方法,也存在解绑的方法,那就是 $off() 。
-
如果没有提供参数,则移除所有的事件监听器;
-
如果只提供了事件,则移除该事件所有的监听器;
-
如果同时提供了事件与回调,则只移除这个回调的监听器
父组件只使用一种绑定方法
<School @test="test"/>methods: {test(val) {console.log(val,'这是子组件传递过来的数据')},
},
子组件解绑事件
1、只提供事件,则移除该事件所有的监听器( 只传递一个事件和传递多个事件 )
<template><div><p class="demo" @click="goto">School组件</p><p @click="unbind">解绑事件</p></div>
</template>export default {data() {return {msg: "子组件数据",};},methods: {goto() {this.$emit("test", this.msg);},unbind() {console.log("解绑事件");this.$off('test'); // 若只传递一个参数,则只解绑一个自定义事件this.$off(['test1','tset2','test3']); // 若传递一个数组,则同时解绑传递的多个自定义事件},},
};
触发父组件事件之后,点击触发解绑事件,再次触发父组件事件,无法打印出子组件数据
2、同时提供了事件与回调,则只移除这个回调的监听器
- 我在子组件的 mounted 生命周期中 监听了 myEvent 事件,且该事件上存在两个回调函数
- 点击 测试按钮时,$emit 触发 myEvent 事件,myEvent 事件上的回调函数全部触发
- 点击解绑按钮,解绑 myEvent 事件 上的 this.myCallback() 函数,只剩下 匿名函数
- 再次点击 测试按钮,发现 myEvent 事件 上,this.myCallback() 函数不触发,匿名函数触发
<template><div><p @click="test">测试</p><p @click="remove">解绑myCallback</p></div>
</template><script>
export default {mounted() {// 添加事件监听器,在组件挂载后执行 myCallback 函数this.$on('myEvent', this.myCallback);this.$on('myEvent', () => {console.log('我是匿名函数,我被触发了')});},methods: {test() {this.$emit('myEvent')},remove() {console.log('我解绑了myCallback,但是没有解绑匿名函数')this.$off('myEvent',this.myCallback)},myCallback() {console.log('我是myCallback,我被触发了')}},
};
</script>
ps:$on 监听事件之后,需要 $emit 触发事件监听,才去执行 $off,不然绑定的事件没触发,看不出来效果( 绑定事件都不触发,你解绑它干啥,直接不监听就行了啵 )
3、 如果没有提供参数,则移除所有的事件监听器
在父组件中给 School子组件 绑定两个自定义事件
<School @test="test" @test1="test1"/>methods: {test(val) {console.log(val,'这是子组件传递过来的数据')},test1(val) {console.log(val,'这是子组件传递过来的数据1')},
},
在子组件中触发两个绑定的自定义事件
<template><div><p @click="bind">绑定</p><p @click="remove">解绑</p></div>
</template><script>
export default {methods: {bind() {this.$emit('test','test')this.$emit('test1','test1')},remove() {this.$off()},},
};
</script>
- 点击 bind 触发绑定事件,控制台上会打印出数据。
- 点击 remove 移除所有绑定事件。
- 再次点击 bind 触发绑定事件,控制台无输出,表明所有绑定事件已移除
Vue destroyed() 生命周期
实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
<template><div><p @click="bind">绑定</p><p @click="death">销毁子组件</p></div>
</template><script>
export default {methods: {bind() {this.$emit('test','test')this.$emit('test1','test1')},death() {this.$destroy()}},
};
</script>
- 点击 bind 按钮,触发绑定函数,控制台上输出。
- 点击 销毁子组件 按钮,销毁子组件,移除所有事件监听器,解绑所有指令
- 再次点击 bind 按钮,控制台无输出
总结
1、组件的自定义事件是一种组件间的通信方式:子组件 向 父组件 传递数据。
2、使用场景:子组件B 向 父组件A 传递数据,需要在 父组件A 中给 子组件B 绑定自定义事件( 事件的回调在 A 中 )
3、绑定自定义事件:
- 第一种方式:在父组件中
-
<School @test="test"/><School v-on:test="test"/>
- 第二种方式:在父组件中
-
<School ref='student'/>mounted() {this.$refs.student.$on('qwe', this.getname) }
- 第三种方式:若想让自定义事件只能触发一次,可以使用 once 修饰符,或 $ones 方法
4、触发自定义事件
this.$emit('test','向传递的数据')
5、解绑自定义事件
this.$off()
6、也可以使用 生命周期钩子函数 this.$destroy() 来销毁组件达到解绑所有自定义事件
7、组件上也可以绑定 原生DOM事件,使用 .native 事件。即使是 @click 事件,Vue也不会将其解析为 自定义事件,不用在 School 子组件中 使用 $emit 触发
<School @click.native="test"/>
8 、注意:通过 this.$refs.xxx.$on( 'xxx' , callback ),绑定自定义事件时,callback 回调要么配置在 mtenods 中,要么使用箭头函数,否则 this 指向存在问题( 因为 callback 函数接收的参数都是从子组件中传递的,包括 this也是,如果使用 function () {} 函数,则该函数内部 this 指向子组件 )