Vue中的事件绑定与解绑方式

目录 事件绑定 基础知识 使用场景 注意事项 v-on 绑定事件 语法 实例 $ref绑定事件 语法 实例 事件解绑 语法 实例  总结

事件绑定

基础知识

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

注意事项

组件上，默认绑定的事件为自定义事件；绑定原生事件的时候需要添加  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更加更加灵活。不局限于函数中而是可以分布在各个位置。

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

查看更多关于Vue中的事件绑定与解绑方式的详细内容...