Vue中的事件绑定与解绑方式_vue.js_

事件绑定

基础知识

使用场景

• 子组件==>父组件传数据
• 在父组件中给子组件绑定自定义事件，事件的回调在父组件中。

注意事项

组件上，默认绑定的事件为自定义事件；绑定原生事件的时候需要添加  native修饰符。

• 绑定一个名为click的自定义事件： 
• 绑定一个click原生事件：

v-on 绑定事件

语法

绑定事件在父组件中进行：

方法一：@事件名称=“函数名称”

方法二：v-on:事件名称=“函数名称”

在methods中配置回调函数

子组件传递参数：

 结构中定义触发事件    

触发事件函数中使用  this.$emit("事件名称", 参数);  传递参数

实例

父组件：

 子组件：

$ref绑定事件

语法

绑定事件在父组件中进行：

this.$refs.实例名称.$on("触发事件名称", 回调函数)

子组件传递参数：

结构中定义触发事件

触发事件函数中使用  this.$emit("事件名称", 参数);  传递参数

实例

父组件：

 子组件：

事件解绑

语法

• 解绑一个自定义事件：this . $off('事件名称') //字符串形式 
• 解绑多个自定义事件：this .$off([ ' 事件1', '事件2'])   //数组形式 
• 解绑所有自定义事件：this.$off()   //无参

组件实例对象销毁，此组件身上的自定义事件全部失效 

vm 实例对象销毁， vm的所有 组件实例对象 身上的自定义事件全部失效

实例 

mounted() {          console.log(this.$refs.student.$on("aaa", this.getStusentName));     },   beforeDestroy() {           this.$off("aaa");  }

总结

v-on比$ref更加简单，但是$ref更加更加灵活。不局限于函数中而是可以分布在各个位置。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！