Vue中的事件绑定与解绑方式
作者：“玫瑰无原则 ”
这篇文章主要介绍了Vue中的事件绑定与解绑方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
事件绑定
基础知识
使用场景
- 子组件==>父组件传数据
- 在父组件中给子组件绑定自定义事件，事件的回调在父组件中。
注意事项
组件上，默认绑定的事件为自定义事件；绑定原生事件的时候需要添加 native修饰符。
- 绑定一个名为click的自定义事件：<Demo @click="test"/>
- 绑定一个click原生事件：<Demo @click.native="test"/>
v-on 绑定事件
语法
绑定事件在父组件中进行：
方法一：@事件名称=“函数名称”
<Demo @atguigu="test"/>
方法二：v-on:事件名称=“函数名称”
<Demo v-on:atguigu="test"/>
在methods中配置回调函数
子组件传递参数：
<button @click="触发事件函数">结构中定义触发事件</button>
触发事件函数中使用 this.$emit("事件名称", 参数); 传递参数
实例
父组件：
<template>
<Student @demo="Demotest" />
//这里demo为事件名称 Demotest为函数名称
</template>
<script>
import Student from "./Student.vue";
export default {
name: "School",
components: {
Student,
},
methods: {
Demotest(name) {
console.log("我是父组件，我是用v-on绑定事件传递参数", name);
},
},
};
</script>子组件：
<template>
<button @click="sendStudent">点我传递学生信息</button>
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "张三",
age: 18,
};
},
methods: {
sendStudent() {
this.$emit("demo", this.name);
//demo为事件名称，对应父组件的@demo事件
//传递this.named这个参数
},
},
};
</script> $ref绑定事件
语法
绑定事件在父组件中进行：
<School ref= "实例名称" ></School>
this.$refs.实例名称.$on("触发事件名称", 回调函数)
子组件传递参数：
<button @click="触发事件函数">结构中定义触发事件</button>
触发事件函数中使用 this.$emit("事件名称", 参数); 传递参数
实例
父组件：
<template>
<Student ref="student" />
//student为实例名称并非函数名称
</template>
<script>
import Student from "./Student.vue";
export default {
name: "School",
components: {
Student,
},
methods: {
getStusentName(name) {
console.log("school收到了student的名字", name);
},
},
mounted() {
console.log(this.$refs.student.$on("aaa", this.getStusentName));
//student是实例名称 aaa是事件名称
//getStusentName 是回调函数 此处只能在methods配置回调函数或者使用箭头函数否则this指向会出问题
},
};
</script>子组件：
<template>
<button @click="sendStudentName">点我传递Studentname</button>
//此处sendStudentName为触发事件的函数名称
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "张三",
age: 18,
};
},
methods: {
sendStudentName() {
this.$emit("aaa", this.name);
//aaa为事件名称 需要对应父组件的事件名称
},
};
</script> 事件解绑
语法
- 解绑一个自定义事件：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更加更加灵活。不局限于函数中而是可以分布在各个位置。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。