提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

Vue2的父子组件通信是利用props和$emit。具体可以看下之前发布的博客：Vue2组件通信
而Vue3是利用defineProps 、 defineEmits。
defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。
具体详细内容可以参考官网：Vue3 defineProps与defineEmits
如果使用了 TypeScript，使用纯类型声明来声明 prop 和 emit 也是可以的。官方教程如下：针对类型的 props、emit 声明
注意：defineProps 或 defineEmits 要么使用运行时声明，要么使用类型声明。同时使用两种声明方式会导致编译报错！

---

一、父传子 defineProps

场景：父组件传递值给子组件，子组件会利用definePropes接收并展示出来。如果父组件没有传值，那么子组件就会显示它设置的默认值了。

1.使用运行时声明

父组件传值，代码如下图所示：

效果如下：

如果父组件没有传值，那么子组件就会显示它设置的默认值了。代码如下图所示：

效果如下：

2.使用针对类型的声明

选中defineProps，按住ctrl并点击defineProps，就可以看到源码中defineProps的内容，可以看到JavaScript和TypeScript是不一样的写法。

官网：针对类型的 defineProps 声明的不足之处在于，它没有可以给 props 提供默认值的方式。为了解决这个问题，我们还提供了 withDefaults 编译器宏。代码会被编译为等价的运行时 props 的 default 选项。此外，withDefaults 辅助函数提供了对默认值的类型检查，并确保返回的 props 的类型删除了已声明默认值的属性的可选标志。

父组件传值的情况，代码如下图所示：

效果如下：

父组件不传值的情况，代码如下图所示：

效果如下：

这就实现了父传子的功能了。

二、子传父 defineEmits

选中defineEmits，按住ctrl并点击defineEmits，就可以看到源码中defineEmits的内容，可以看到JavaScript和TypeScript是不一样的写法。

如果使用了 TypeScript，使用纯类型声明来声明 prop 和 emit 也是可以的。

场景：父组件中定义了一个num，初始值为1。定义了一个方法用来增加num值。子组件发射自定义事件，父组件中接收自定义事件，并绑定在对应的方法上，监听子组件的自定义事件；监听到事件之后，就到父组件的方法中对num进行递增处理。

1.使用运行时声明

可以看到点击子组件的按钮，父组件中的num值会递增。

2.使用针对类型的声明

我们用ts的写法，ts写法要先声明emit，然后再调用。

可以看到，点击子组件中的按钮，父组件中的num值就会递增。

这就实现了子传父的功能了。

---

总结

以上，就是要分享的关于Vue3父子组件通信的内容了。