在如今的前端開發作業中， 組件之間的引數傳遞是一個非常常見的問題
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 的官方檔案~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/174430.html
標籤：JavaScript
上一篇：實時訊息推送整理