文章目录
组件的自定义事件
组件自定义事件,在父组件给子组件传入的自定义事假,事件回调写在父组件中。子组件中触发自定义事件,并且传送数据给父组件
理解
一种组件间的通讯方式,适用于子组件向父组件传递数据
使用场景
子组件给父组件传数据,在父组件中给子组件绑定自定义事件(事件的回调在父组件中)
绑定自定义事件
- 第一种写法:在父组件中写
<Demo @组件名称="回调函数名称" />
或<Demo v-on:组件名称="回调函数名称" />
- 第二种写法:在父组件中写:
<Demo ref="demo">
......
// 配置mounted函数
mounted() {
this.$refs.demo.$on("组件名", 回调函数名);
}
- 使用
once
修饰符或$once
方法,使组件自定义事件只触发一次
触发自定义事件
在子组件中使用
this.$emit("组件名", 数据)
解绑自定义事件
在子组件中使用
this.$off("组件名")
解绑一个,this.$off(["组件名1", "组件名2", ...])
解绑多个,this.$off()
解绑全部
组件上绑定原生DOM事件
需要使用修饰符
native
注意
通过
this.$refs.demo.$on("组件名", 回调函数名);
绑定自定义事件,回调最好配置在methods中,要么用箭头函数**,否则会出现this指向问题
App组件
<template>
<div class="app">
<h1>{
{
msg}}{
{
studentName}}</h1>
<!-- 通过父组件给子组件传递函数类型的props实现 子给父传递数据 -->
<School :getSchoolName="getSchoolName" />
<hr>
<!-- 通过父组件给子组件绑定一个自定义组件实现 子给父传递数据 (第一种写法,使用v-on:)-->
<!-- <Student v-on:atguigu="getStudentName" /> -->
<!-- <Student @atguigu="getStudentName" @demo="m1" /> -->
<!-- 通过父组件给子组件绑定一个自定义组件实现 子给父传递数据 (第二种写法,使用ref) -->
<Student ref="student" @click.native="show"/>
</div>
</template>
<script>
// 引入School组件
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
name: "App",
// 注册组件
components: {
Student, School},
data() {
return {
msg: "你好啊!",
studentName: ''
}
},
methods: {
getSchoolName(name) {
console.log("App 收到了学校名称:" , name)
},
getStudentName(name) {
console.log('App 收到了学校名称:', name);
this.studentName = name;
},
m1() {
console.log("自定义事件demo被触发了")
},
show() {
alert("123");
}
},
mounted() {
// 绑定自定义事件
this.$refs.student.$on("atguigu", this.getStudentName);
/* setTimeout(()=> {
this.$refs.student.$on("atguigu", this.getStudentName);
}, 3000); */
},
}
</script>
<style>
.app {