前言
Vue2的父子组件通信是利用props和$emit。具体可以看下之前发布的博客：Vue2组件通信
而Vue3是利用defineProps 、 defineEmits。
defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。
具体详细内容可以参考官网：Vue3 defineProps与defineEmits
注意：defineProps与defineEmits不用导入，可以直接使用
如果使用了 TypeScript，使用纯类型声明来声明 prop 和 emit 也是可以的。官方教程如下：针对类型的 props、emit 声明
注意：defineProps 或 defineEmits 要么使用运行时声明，要么使用类型声明。同时使用两种声明方式会导致编译报错！
一、父传子 defineProps
场景：父组件传递值给子组件，子组件会利用definePropes接收并展示出来。如果父组件没有传值，那么子组件就会显示它设置的默认值了。
1.使用运行时声明
父组件传值，子组件利用defineProps接收值，并且可以设置值的属性，type是设置类型，default设置默认值。代码如下图所示：
效果如下：
如果父组件没有传值，那么子组件就会显示它设置的默认值了。代码如下图所示：
效果如下：
2.使用针对类型的声明
选中defineProps，按住ctrl并点击defineProps，就可以看到源码中defineProps的内容，可以看到JavaScript和TypeScript是不一样的写法。
父组件传值的情况，代码如下图所示：
效果如下：
父组件不传值，子组件没有定义默认值的情况。
接口Props中的定义了两个可选属性，那么父组件不传值也不会报错，如果没定义为可选属性，那么父组件漏传属性，就会出现报错！
代码如下图所示：
那么就不会显示内容了。
官网：针对类型的 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父子组件通信的内容了。