企业官网建设流程全解析

一、先搞懂：组件通信到底是个啥？

你可以把 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 -> D，D 需要 A 的数据，用 Props 一层层传会非常繁琐（这叫“属性透传”）。

这时候就需要升级方案了：

• Provide / Inject（跨层级注入）：就像是老板在办公室放了一个公共文件柜，不管隔了多少层，员工（后代组件）都可以直接去拿。
• Pinia（全局状态管理）：就像是公司的云盘，任何部门（跨页面、跨组件）都可以登录访问同一份数据。

选型口诀：父子直连用 Props/Emit，跨层级用 Provide/Inject，跨页面用 Pinia。

七、总结

把这张图记在脑子里，组件通信就不难了：