按理说，

在 Vue3 开发中，父子组件通信是最基础也最主要的技能。不管是简单页面还是复杂项目，都离不开父子组件的数据传递与事件交互。

这篇博客会用最通俗的语言，结合

子组件 Child.vue

主要要点：

• props 是只读的，子组件不能直接修改 props
• 支持类型校验、默认值、必传限制，代码更健壮

. defineEmits

子组件不能直接修改父组件数据，需要触发自定义事件,把数据回传给父组件。

子组件 Child.vue

父组件 Far.vue

• 子模块只负责触发事件+传值。逻辑交给父模块处理
• 遵循 Vue

. ref / defineExpose

父模块想直接调用子模块的方法、获取子模块数据,用 #ref# + #defineExpose#。

子模块 Child.vue

 import { ref } from 'vue'
// 子模块数据
 const  childMsg = ref
// 子模块方法
 const  childFn = => { alert }
// 必须用 defineExpose 暴露才能让 爸爸 获取
 defineExpose 
`
`
`
`
`


Oops need correct formatting.
Let's redo that section correctly:













c5e1cf0e-a0b9-fd33-7f94-e8c8d15d5bc8
20240202T140900Z_20190202_180000_01.png

faecacda-c5d5-a03f-86eb-bbf0c1c1b7e5