Vue父子组件之间事件通信示例解析
前言
组件间传值的章节我们知道父组件给子组件传值的时候，使用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()通知父组件，自己想做的事情，父组件通过@事件名称的方式接收子组件的事件，这里需要注意的是，子组件发送事件时，使用的是驼峰命名，父组件定义监听时使用的是分隔符的方式命名，如此就完成了父子组件的通信。
到此这篇关于Vue父子组件之间事件通信示例解析的文章就介绍到这了,更多相关Vue父子组件事件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用Vue-cli3.0创建的项目，如何发布npm包,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
这篇文章主要介绍了vue 百度地图(vue-baidu-map)绘制方向箭头折线,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章给大家介绍了基于vue封装一个带眼睛的密码子组件的方法,文章中有详细的代码讲解,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-09-09
vue中使用better-scroll实现滑动效果及注意事项
这篇文章主要介绍了vue中使用better-scroll实现滑动效果，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了Vue框架TypeScript装饰器使用指南小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
本文主要介绍了vue项目中使用require.context引入组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue @click @tap重叠事件区分方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了Vue无限滑动周选择日期的组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
详解VUE自定义组件中用.sync修饰符与v-model的区别
这篇文章主要介绍了详解VUE自定义组件中用.sync修饰符与v-model的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论