目录事件绑定基础知识使用场景注意事项v-on 绑定事件语法实例$ref绑定事件语法实例事件解绑语法实例 总结事件绑定 基础知识 使用场景 子组件==>父组件传数据在父
组件上,默认绑定的事件为自定义事件;绑定原生事件的时候需要添加 native修饰符。
绑定事件在父组件中进行:
方法一:@事件名称=“函数名称”
<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>
绑定事件在父组件中进行:
<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>
组件实例对象销毁,此组件身上的自定义事件全部失效
vm 实例对象销毁, vm的所有 组件实例对象 身上的自定义事件全部失效
mounted() {
console.log(this.$refs.student.$on("aaa", this.getStusentName));
},
beforeDestroy() {
this.$off("aaa");
}
v-on比$ref更加简单,但是$ref更加更加灵活。不局限于函数中而是可以分布在各个位置。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: Vue中的事件绑定与解绑方式
本文链接: https://www.lsjlt.com/news/169335.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0