目录事件绑定基础知识使用场景注意事项v-on绑定事件语法实例$ref绑定事件语法实例事件解绑语法实例总结事件绑定基础知识使用场景子组件==父组件传数据在父组件中给子组件绑定自定义事件，事件的回调在父...
目录
事件绑定基础知识
使用场景
注意事项
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更加更加灵活。不局限于函数中而是可以javascript分布在各个位置。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
