在如今的前端開發工作中， 組件之間的參數傳遞是一個非常常見的問題
Vue 2 已經有了一套非常實用的組件傳參機制，Vue 3 在原本的基礎上做了些改進
一、父組件傳參到子組件
在《Vue3.x 從零開始（二）—— 重新認識 Vue 組件》中已經介紹過 Props
這是最常用的父對子傳參方式
上面演示的參數只是簡單的字符串，也可以通過 v-bind 指令傳入 Number、Function、Object 等類型
除了傳遞基本的參數之外，props 還可以用來傳遞組件
由於組件是變量的形式傳入，所以在子組件中需要動態渲染組件，這就會用到內置組件 <component />
<component /> 組件會接收 is 參數，並基於這個參數渲染組件，所以我們只要通過 is 屬性傳入組件變量即可
子組件定義 prop：
父組件傳入組件：
在父組件部分，我們需要把 Alert 組件傳給子組件，所以需要引入組件之後，將 Alert 組件保存到 data
data 是具有響應性的，而組件作爲變量傳遞的時候，是不需要具備響應性的
所以我使用了 markRaw 方法來消除響應性（ markRaw 會標記一個對象，使其永遠不會轉換爲代理，只返回對象本身）
而在 Vue 2.x 中並沒有類似的方法，會對整個組件做數據劫持，導致額外的性能開銷
在寫文的時候有同事提出了一個問題：prop 傳入組件和 slot 有什麼區別？
slot 是在父組件中插入組件，被插入的內容和子組件無關，所有邏輯都在父組件中完成
而 prop 傳入的組件恰恰相反，父組件只是決定傳入的內容，相關邏輯是在子組件中完成
二、子組件傳參到父組件
子組件通常使用自定義事件的方式向父組件傳參，即 $emit
this.$emit('event-name', data);
$emit 函數接收的第一個參數是自定義的事件名稱，這個事件名稱建議採用全小寫的 kebab-case 事件名
除了事件名稱外，$emit 還可以接收數量不定的額外參數，這些額外參數會按順序傳遞給父組件的事件處理函數
來看一下自定義事件的完整用法，首先在子組件中通過 $emit 定義事件和需要傳遞的參數
然後在父組件中監聽該事件，並通過事件處理函數接收子組件的傳參
通過 $emit 我們還可以做一些更厲害的事情，比如對 prop 實現雙向綁定
prop 是單向下行綁定，也就是說，父級 prop 的更新會在子組件中響應，而子組件無法修改 prop 的值
如果子組件確實需要修改 prop 的值，需要使用 update:prop 事件
比如有一個 prop 的屬性名爲 text，我們可以在子組件中通過 $emit 觸發 update:text 事件並傳參，然後在父組件進行賦值
Vue 3 爲了提升開發者的效率，還提供了 v-model 語法。在父組件中使用 v-model:prop ，就不需要監聽 update 事件了
// Vue 2 中的 .sync 修飾符已移除
但子組件還是要用 $emit 觸發 update 事件 this.$emit('update:text', data);
如果是 Vue 2 的用戶，應該已經發現 Vue 3 中 v-model 的用法已經發生了改變
在 Vue 2 中，在組件上使用 v-model 相當於綁定了一個屬性名爲 value 的 prop，並監聽了 input 事件
而在 Vue 3 中，v-model 相當於傳遞了一個名爲 modelValue 的 prop，並監聽 update:modelValue 事件
<child-component v-model="text" />
<!-- 在 Vue 3 中，這兩種寫法是等價的 -->
<child-component
:modelValue="text"
@update:modelValue="text = $event"
/>
也就是說，Vue 3 中的 v-model 是 prop + update 的語法糖，只是當 prop 被定義爲 modelValue 的時候可以省略 :modelValue
三、深層次的組件傳參
上面介紹是父子組件之間的數據傳遞，而對於深嵌套的祖孫組件：
App.vue
└─ Home.vue
└─ Footer.vue
├─ FooterItem.vue
└─ FooterTips.vue
像這樣的結構，如果 Home 要傳遞一個參數給 FooterTips，繼續使用 prop 或者 $emit 就會很複雜
// 在 Vue 2 中可以使用 event bus 來處理，但 Vue 3 中移除了 $on、$off，所以已經無法構建 event bus 了
這時候可以使用 provide / inject
首先在孫組件 footer-tips 中通過 inject 定義需要傳入的參數，inject 可以是一個由屬性名組成的字符串數組
然後在祖父級組件中通過 provide 傳入對應的參數
provide 也可以是一個對象，但爲了更安全的開發組件，建議始終將 provide 定義爲返回對象的函數
如果需要定義 inject 的默認值，也可以像 props 一樣，將 inject 定義爲對象：
inject: {
author: {
default: '這是一個沉默的作者',
},
// 如果是 Object 或者 Array 這種引用類型，需要用函數返回
info: {
default: () => ({
name: 'wise',
home: 'China',
}),
},
},
在上一篇博客《Vue3.x 從零開始（三）—— 使用 Composition API 優化組件》中已經介紹過 setup
如果需要在 setup 中使用 provide，需要引入 Vue 提供的 provide 全局方法：
import { provide, ref } from 'vue';
setup() {
// 使用 ref 提供響應性
const author = ref('Wise.Wrong');
// provide 可以定義兩個參數，分別爲 key 和 value
provide('author', author.value);
}
同樣的，setup 中的 inject 也需要全局引入
import { inject } from 'vue';
setup() {
// inject 接收兩個參數，分別爲 key 和默認值，默認值可以爲空
const author = inject('author', '這裏是默認值');
return { author };
},
四、子組件傳參到子組件
在工作中經常也會遇到平級的兩個組件組件的通信
App.vue
└─ Home.vue
├─ Header.vue
└─ Footer.vue
比如這裏的 Header 和 Footer 都是 Home 的子組件，Footer 中有某個字段受 Header 的影響
對於這種情況，應該將交互邏輯放到父組件中處理，這種思路叫做狀態提升
比如上圖的例子，可以在父組件 Home 中定義一個字段，通過 prop 傳入 Footer 組件
然後在 Header 組件中通過 $emit 觸發自定義事件，拋出需要傳遞給 Footer 的數據
同時在 Home 組件中監聽該事件，並將接到的參數賦值到傳入 Footer 的 prop
子組件與子組件的通信，在實際業務場景中會有所不同，但只要牢記狀態提升，將交互邏輯放到父組件來處理，絕大部分情況都能迎刃而解
除了上面提到的情況外，還有可能遇到特別複雜的情況，比如：
1. 孫組件對祖父級組件傳參；
2. 孫組件對孫組件傳參。
通常來說，這些問題都可以通過良好的組件設計來規避
但隨着業務規模的不斷擴大，有些複雜的業務場景確實需要直面這些問題，這時候就需要進行狀態管理
Vue 團隊開發了 Vuex 來集中式存儲和管理應用中所有組件的狀態
在後面的文章中我會提到如何在 Vue 3 中使用 Vuex，但不會單獨介紹 Vuex 的用法
關於 Vuex 的基本用法可以參考我以前的博客《Vue 爬坑之路（四）—— 與 Vuex 的第一次接觸》
如果想更進一步，建議閱讀 Vuex 的官方文檔~