零、为什么组件通信是 Vue3 的主要难点？

想象一下这个场景：你正在开发一个复杂的后台。有一个需求是在多层嵌套的组件中，需要把最底层的表单数据提交到最顶层的页面。这时候你怎么办，一层层 props 传上去？还是用 $emit 冒泡？如果没有合适的方法，往往会出现 props‑drilling、事件链条过长导致维护成本暴涨。

说到更头疼的是，面试必问！

今天我们就用一篇文章。把 Vue3 的 8 种组件通信方式讲透，附代码 + 场景 + 选型建议，让你从痛点出发，一步步掌握常用方法。其实，

一、父子组件通信

1️⃣ Props / Emit — 最基础且可靠的方式

痛点：当子级数量增多时每层都需要逐级传递 props 或 emit。容易出现 “props‑drilling” 的尴尬。

Parent.vue：

Child.vue：

TypeScript 类型提示说明

A/B 类型安全： Vue3 的 defineProps/defineEmits 自动推导类型，让你在编辑器里享受完美提示。

2️⃣ v-model — 双向绑定的优雅写法