组件的自定义事件
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指向会出问题!
效果图
父组件代
<div>
<div class="demo">
<h3>学校名字{{ name }}</h3>
<h3>学校地址{{ address }}</h3>
<h4 v-show="stuName">学生姓名已收到{{ stuName }}</h4>
</div>
<!-- @getStuName是自定义时间名 -->
<Student @getStuName="getStuName"></Student>
</div>
<script>
import Student from "./Student.vue";
export default {
name: "School",
components: { Student },
data() {
return {
name: "atguigu",
address: "北京",
stuName: "",
};
},
methods: {
getStuName(name) {
console.log("我是School", name);
this.stuName = name;
},
},
};
</script>
子组件代码
<div class="demo">
<h1>学生姓名{{ name }}</h1>
<button @click="send(name)">点击</button>
</div>
<script>
export default {
name: "Student",
data() {
return {
name: "张三",
};
},
methods: {
send(name) {
//$emit调用自定义事件
this.$emit("getStuName", name);
},
},
// 解绑自定义事件
beforeDestroy() {
this.$off("getStuName");
},
};
</script>
第二种方法
利用ref选择
<div>
<div class="demo">
<h3>学校名字{{ name }}</h3>
<h3>学校地址{{ address }}</h3>
<h4 v-show="stuName">学生姓名已收到{{ stuName }}</h4>
</div>
<!-- @getStuName是自定义时间名 -->
<Student ref="Stu"></Student>
</div>
import Student from "./Student.vue";
export default {
name: "School",
components: { Student },
data() {
return {
name: "atguigu",
address: "北京",
stuName: "",
};
},
methods: {
getStuName(name) {
console.log("我是School", name);
this.stuName = name;
},
},
mounted() {
//$on绑定事件
this.$refs.Stu.$on("getStuName", this.getStuName);
},
};
</script>