组件的自定义事件
1. 一种组件间通信的方式,适用于:<strong style="color:red">子组件 ===> 父组件</strong>
2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(<span style="color:red">事件的回调在A中</span>)。
3. 绑定自定义事件:
(1). 第一种方式,在父组件中:```<Demo @atguigu="test"/>``` 或 ```<Demo v-on:atguigu="test"/>```
(2). 第二种方式,在父组件中:
```js
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
```
(3). 若想让自定义事件只能触发一次,可以使用```once```修饰符,或```$once```方法。
4. 触发自定义事件:```this.$emit('atguigu',数据)```
5. 解绑自定义事件```this.$off('atguigu')```
6. 组件上也可以绑定原生DOM事件,需要使用```native```修饰符。
7. 注意:通过```this.$refs.xxx.$on('atguigu',回调)```绑定自定义事件时,回调<span style="color:red">要么配置在methods中</span>,<span style="color:red">要么用箭头函数</span>,否则this指向会出问题!
school.vue
<template>
<div class="demo">
<h2>学校名称:{{ name }}</h2>
<h2>学校地址:{{ address }}</h2>
<button @click="sendSchoolName">把学校名给App</button>
</div>
</template>
<script>
export default {
name: "School",
props:['getSchoolName'],
data() {
return {
name: "华立",
address: "广州",
};
},
methods: {
sendSchoolName() {
this.getSchoolName(this.name)
},
},
};
</script>
<style scoped>
.demo {
background-color: skyblue;
}
</style>
student.vue
<template>
<div class="demo">
<h2>学生姓名:{{ name }}</h2>
<h2>学生性别:{{ sex }}</h2>
<h2>当前求和为:{{ number }}</h2>
<button @click="add">点我number++</button><br />
<button @click="sendStudentName">把学生名给App</button><br />
<button @click="unbind">解绑huali事件</button><br />
<button @click="death">销毁当前Student的组件实例对象</button>
</div>
</template>
<script>
//引入一个hunhe
export default {
name: "Student",
data() {
return {
name: "张三",
sex: "男",
number: 0,
};
},
methods: {
add() {
this.number++;
console.log("add回调被调用了");
},
sendStudentName() {
//触发Student身上的绑定事件huali
this.$emit("huali", this.name, 333, 4444, 666);
/* this.$emit("student", this.name); */
this.$emit("demo");
},
unbind() {
//this.$off('huali')//只适用解绑一个事件
//this.$off(['huali','demo'])//解绑多个自定义事件
this.$off(); //解绑所有自定义事件
},
death() {
this.$destroy(); //销毁了当前Student组件的实例对象,销毁后所有student实例的自定义事件都不奏效了
},
},
};
</script>
<style scoped>
.demo {
background-color: pink;
}
</style>
App.js
<template>
<div>
<h2>{{ msg }}</h2>
<!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
<School :getSchoolName="getSchoolName" />
<hr />
<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on) -->
<Student @huali="getStudentName" @demo="m1"/>
<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref) -->
<!-- <Student ref="student" /> -->
</div>
</template>
<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
export default {
name: "App",
components: { Student, School },
data() {
return {
msg: "你好啊!",
};
},
methods: {
getSchoolName(name) {
console.log("App收到了学校名:", name);
},
getStudentName(name,...params) {
console.log("App收到了学生名:", name,params);
},
m1(){
console.log("demo事件触发了!")
}
},
mounted() {
//绑定自定义事件
/* this.$refs.student.$on("student", this.getStudentName); */
//绑定自定义事件(一次性)
/* this.$refs.student.$once("student", this.getStudentName); */
},
};
</script>
<style>
body {
background-color: gray;
}
</style>