文章目录一、先搞懂组件通信到底是个啥二、Props老爸给儿子零花钱父传子单向向下三、Emit儿子向老爸汇报子传父事件通知四、v-model父子俩的“对讲机”双向绑定五、Slots给组件留个“坑位”内容分发七、总结一、先搞懂组件通信到底是个啥你可以把 Vue 组件想象成老板父组件和员工子组件。老板要把任务交代下去传数据。员工做完任务要把结果汇报上来传事件。如果员工要请示老板老板同意了再干双向绑定。老板觉得办公室缺个喝茶的地方让员工在某个位置预留个空间插槽。二、Props老爸给儿子零花钱父传子单向向下核心原则单向数据流只能读不能改 通俗解释父组件给子组件传数据就像老爸给孩子零花钱。钱一旦交到孩子手里孩子只能花却不能偷偷改动“钱的面额”——也就是说子组件不能直接修改 Props。如果孩子想多要点零花钱必须告诉老爸由老爸重新给。 代码演示子组件UserInfo.vue接收方父组件App.vue发送方三、Emit儿子向老爸汇报子传父事件通知核心原则子组件只负责通知“发生了什么”父组件来决定怎么处理。 通俗解释子组件不能直接改 Props那遇到“点击按钮加1”这种需要修改数据的场景怎么办用 Emit 抛出一个事件喊一声“老爸加1了”老爸父组件听到后自己把数据改掉。 代码演示子组件Counter.vue父组件App.vue发送方页面显示计数值同步变化四、v-model父子俩的“对讲机”双向绑定核心原则v-model 只是一个语法糖本质还是 Props Emit。 通俗解释每次写 :modelValue和update:modelValue太累了Vue 直接给你一个v-model相当于一个对讲机父子俩能同步通话。 代码演示子组件CustomInput.vue父组件App.vue发送方五、Slots给组件留个“坑位”内容分发核心原则Props 传数据Slots 传结构HTML 模板。 通俗解释你买了一个精装修的房子子组件但客厅的墙你想自己贴画自定义内容。这时候子组件就可以在墙上留个slot/slot父组件想放什么就放什么。 代码演示子组件CardBox.vueBox.vue父组件App.vue发送方## 六、进阶如果组件层级深了怎么办痛点与方案在写代码时我发现如果组件是 A - B - C - DD 需要 A 的数据用 Props 一层层传会非常繁琐这叫“属性透传”。这时候就需要升级方案了Provide / Inject跨层级注入就像是老板在办公室放了一个公共文件柜不管隔了多少层员工后代组件都可以直接去拿。Pinia全局状态管理就像是公司的云盘任何部门跨页面、跨组件都可以登录访问同一份数据。选型口诀父子直连用 Props/Emit跨层级用 Provide/Inject跨页面用 Pinia。七、总结把这张图记在脑子里组件通信就不难了通信方式方向生活中的比喻Props父 → 子老爸给儿子零花钱只能花不能改Emit子 → 父儿子向老爸汇报情况v-model双向父子打电话Props Emit 的语法糖Slots父 → 子结构房子留个坑位你自己装修希望这篇文章对刚学 Vue 的你有所帮助如果觉得有用点个赞再走吧