在我们写
vue
3 的项目中，我们都会进行组件通信，我们除了使用 pinia 公共数据源的方式除外，我们还可采用那些更简单的api方法呢？那下面我就来给大家介绍介绍几种父子组件和子父组件通信的方式。
1、父子组件通信
1.1 defineProps
父子组件通信我们第一个想到的就是props，
我们在子组件显示声明所接受的props，然后我们在从父组件传入对应的 key与value，
这样我们就可以在子组件上接收到父组件传过来的属性与值。【相关推荐：
vuejs视频教程
、
web前端开发
】
具体实现如下:
立即学习
“
前端免费学习笔记（深入）
”；
如上图所示，我们既实现了在子组件上显示了父组件传过来的 list 数组，还使可以向list添加数据使子组件数据更新。
1.2 provide/inject
当我们聊完了props，我们第二个要介绍的就是 vue3 的一个组合式选项 provide 和inject。
projct用于提供可以被后代组件注入的值，而inject用于声明要通过从上层提供方匹配并注入进当前组件的属性。
其代码实现如下:
Vue-router参考手册
Vue-router参考手册下载
下载
如上图所示，我们使用
API向外提供了一个 key 为
，值为
，同时将
设置成了只读属性，防止子组件修改父组件的数据源。然后我们
API接收了
，实现了父子组件的通信。
2.子父组件通信
2.1 defineEmits
上面我介绍了两种父向子传值的方法，但在我们开发中，我们还会遇到子向父组件传值的情况，那我们该怎么解决呢？ 第一个方法就是vue3中的
API，代码实现如下:
如上图所示，我们在子组件上
一个出了一个 add事件给父组件接收，同时在父组件上调用来执行添加的逻辑，再将
的
变为空，实现了父组件向子组件传参。
2.2 v-model:xxx + emit
在介绍完
后, 我们再来介绍一种与其有异曲同工之处的
的方法，实现如下：
再和上面的
方法比较完以后，相信大家也看出了这两者的异曲同工在哪了。我们这里是先将父组件的
传给了子组件，再在子组件修改了父组件的数据源，同时再
还给父组件，实现了子组件向父组件传值。
（学习视频分享：
vuejs入门教程
、
编程基础视频
）
// children.vue
-
{{item}}
// parent.vue
// children.vue
- {{item}}
// parent.vue
providelistlist.valuelist,valueinjectlistdefineEmits// children.vue
// parent.vue
- {{item}}
emitinputvaluedefineEmitsv-model:xxx + emit// children.vue
- {{item}}
defineEmitslistemit