Vue3之父子组件通过事件通信
前言
组件间传值的章节我们知道父组件给子组件传值的时候，使用v-bind的方式定义一个属性传值，子组件根据这个属性名去接收父组件的值，但是假如子组件想给父组件一些反馈呢？就不能使用这种方式来，而是使用事件的方式，父组件通过注册这个事件的监听来接收子组件的信息，然后做对应的操作。
示例解析
在前面的章节我们使用父组件传递过来的值做一个计数组件的时候，使用v-bind的方式传值，这个时候父子组件间是单向数据流的方式，即子组件无法修改父组件传来的值，所以做计数器组件的时候，子组件只能是拷贝一份父组件传来的值，然后做计数操作，本章我们提供事件的方式实现计数的功能，思想就是，我们修改不了父组件传递过来的值，我们就可以通过事件通知父组件修改这个值：代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父子组件通过事件进行通信</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count:1
}
},
methods:{
handleAddOne(){
this.count += 1;
}
},
template:
`
<div>
<counter :count = "count" @add-one="handleAddOne" />
</div>
`
});
app.component('counter',{
props:['count'],
emits:{
addOne:(count) =>{
if(count > 3){
alert(count);
return true;
}
return false;
}
},
methods: {
handleItemClick(){
this.$emit('addOne',this.count);
}
},
template:`<div @click="handleItemClick">{{count}}</div>`
});
const vm = app.mount('#root');
</script>
</html>
当我们点击显示数字的div时，会执行执行
handleItemClick方法，向父组件传递一个add-one事件，并且将目前的count值当成参数传递给父组件，父组件通过@add-one="handleAddOne"监听add-one事件，当收到这个事件后，就执行handleAddOne方法，让count的值加一，然后由于时count的值和子组件又是绑定的，所以这个值也会同步给子组件，这样就会在子组件显示count+1的值。
注意：监听事件，使用“-” 分隔符：如本例中的：@add-one，向外部发送一个事件时用驼峰命名：如本例中的：this.$emit('addOne',this.count);
从代码中我们可以看到从子组件向父组件传递一个事件使用的是$emit()方法，这个方法可以单独传事件如：this.$emit('addOne'); 也可以带参数传递：this.$emit('addOne',2);
另外本例中，我们可以看到这样一段代码：
emits:{
addOne:(count) =>{
if(count > 3){
alert(count);
return true;
}
return false;
}
},
其实这里是便于让代码的阅读者能通过emmits关键字快速知道本组件会向外传递哪些事件，毕竟组件多了后，会有一堆事件，在代码中一个个看的确比较费劲，这个模块还有一个功能就是校验我们可以在里面判断父组件传递过来的值，然后做些想做的操作
总结
本文主要介绍父组件和子组件之间的通信，父组件可以通过v-bind的方式将值传递给子组件，子组件可以使用props:[]接收，然后子组件可以通过事件$emit()通知父组件，自己想做的事情，父组件通过@事件名称的方式接收子组件的事件，这里需要注意的是，子组件发送事件时，使用的是驼峰命名，父组件定义监听时使用的是分隔符的方式命名，如此就完成了父子组件的通信。