这篇“Vue父子组件之间事件通信怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue父子组件之间事件通信怎么实现”文章吧。
示例解析
使用父组件传递过来的值做一个计数组件的时候，使用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时，会执行执行
handleItemClickadd-onecount@add-one="handleAddOne"handleAddOnecountcountcount+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关键字快速知道本组件会向外传递哪些事件，毕竟组件多了后，会有一堆事件，在代码中一个个看的确比较费劲，这个模块还有一个功能就是校验我们可以在里面判断父组件传递过来的值，然后做些想做的操作。
以上就是Vue父子组件之间事件通信怎么实现的详细内容，更多关于Vue父子组件之间事件通信怎么实现的资料请关注九品源码其它相关文章！