事件绑定
基础知识
使用场景
子组件==>父组件传数据
在父组件中给子组件绑定自定义事件 ，事件的回调在父组件中 。
注意事项
组件上 ，默认绑定的事件为自定义事件；绑定原生事件的时候需要添加 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更加更加灵活 。不局限于函数中而是可以分布在各个位置 。
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
