深入探究Vue中三種不同的props用法

更新時間：2024年03月12日 08:29:40 作者：前端貓貓教

Vue?的核心功能之一在于?props?的使用,props?是我們在?Vue?中從父組件到子組件傳遞數(shù)據(jù)的方式,但并非所有?props?都是一樣的,本文我們會深入學(xué)習(xí)這三種不同類型的?props,看看它們有何不同,以及何時使用它們,需要的朋友可以參考下

1. 模板 props

假設(shè)我們正在構(gòu)建一個 Vue 組件。我們想要向其中傳遞某些文本 —— 比如按鈕標(biāo)簽或提示消息。這就是模板 props 的用武之地。

模板 props 可以直接在組件的模板中使，但它們不適用于方法或計算 ref，能且僅能用于模板。

舉個栗子：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
  defineProps({
    message: String
  })
</script>

這個組件采用 message prop 并顯示它，就是如此簡單。

但模板 props 有一個獨(dú)特的特征，它們類似于 slot。我們始終可以用 slot 替換模板 props，從而獲得更大的靈活性。

轉(zhuǎn)換為 slot

舉個栗子，我們使用 slot 重構(gòu)上文的模板 props：

<template>
  <div><slot /></div>
</template>

然后我們可以這樣使用這個組件，而不是將 message 作為模板 props 傳遞：

<MyComponent>message 會被插入 slot</MyComponent>

slot 允許我們傳遞的不僅僅是文本，我們也可以包含 HTML 或其他組件。這就是為什么將模板 props 轉(zhuǎn)換為 slot 可能是一個給力的重構(gòu)。這可以讓我們的組件更加靈活。

slot 可以實(shí)現(xiàn)模板 props 的所有功能，甚至有過之而無不及。我們不能將 HTML 或組件作為模板 props 傳遞。

模板 props vs slot

知道何時使用模板 props 或 slot 可以輔助我們設(shè)計更好的組件。

如果我們需要簡單性，模板 props 就恰到好處。如果考慮靈活性，slot 是正確的選擇。

2. 配置 props

配置 props 都是關(guān)于改變組件的行為方式的。它們不像狀態(tài) props 那樣傳遞數(shù)據(jù)。相反，它們調(diào)整組件的外觀或功能。

假設(shè)我們有一個 Button 組件。我們希望它根據(jù)使用地點(diǎn)的不同，而看起來有所不同。variant 屬性可以控制其樣式：

<template>
  <button :class="`btn-${variant}`">Click me</button>
</template>

<script setup>
  defineProps({
    variant: {
      type: String,
      default: 'primary'
    }
  })
</script>

這個 variant 屬性是一個配置 props。它根據(jù)按鈕的值更改按鈕的類。我們可以傳遞 primary/secondary/danger，從而更改按鈕的外觀。

配置 props 也非常通用。我們可以使用它們來切換功能、調(diào)整樣式或修改組件行為。它們對于創(chuàng)建可重用且適應(yīng)性強(qiáng)的組件特別有用。

這就是為什么它們是第二個可重用性級別的核心部分：配置。

3. 狀態(tài) props 或數(shù)據(jù) props

狀態(tài) props 的作用就是將動態(tài)數(shù)據(jù)傳遞到組件中。它們是使組件具有交互性、并響應(yīng)用戶輸入的關(guān)鍵。

假設(shè)我們有一個列表組件，它會顯式我們傳遞給它的子元素：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script setup>
  defineProps({
    items: Array
  })
</script>

items 屬性是一個狀態(tài) props。它包含組件渲染其列表所需的數(shù)據(jù)。當(dāng) items 發(fā)生變化時，Vue 的響應(yīng)式系統(tǒng)可確保組件自動更新。

狀態(tài) props 對于處理組件內(nèi)的數(shù)據(jù)至關(guān)重要。它們與 Vue 的響應(yīng)性密切配合，使我們的 UI 與 App 的狀態(tài)保持同步。

Vue 中狀態(tài)管理的演變

Vue 的狀態(tài)管理方法多年來一直與時俱進(jìn)。早期版本嚴(yán)重依賴狀態(tài) props 和 Vue 自己的響應(yīng)式系統(tǒng)。

之后，諸如 Vuex、Pinia 和組合式 API 之類的解決方案提供了更加結(jié)構(gòu)化的方式來管理狀態(tài)。但狀態(tài) props 仍然是 Vue 的基本組成部分，尤其是對于將數(shù)據(jù)從父組件傳遞到子組件而言。

何時使用每種類型的 props

現(xiàn)在我們知道了這三種道具，我們需要知道它們的實(shí)際使用場景。

選擇正確類型的 props 取決于我們需要組件執(zhí)行的操作。以下是若干基本準(zhǔn)則：

使用模板 props 進(jìn)行直接顯示在模板中的簡單數(shù)據(jù)傳遞。尤其是如果該數(shù)據(jù)是靜態(tài)的，而不是用戶數(shù)據(jù)。
當(dāng)我們需要調(diào)整組件的行為或外觀時，請選擇配置 props。通常這些是布爾值或枚舉。
狀態(tài) props 最適合隨時間變化的動態(tài)數(shù)據(jù)。比如存儲在數(shù)據(jù)庫中（或可能存儲在數(shù)據(jù)庫中）的任何內(nèi)容。