快捷導(dǎo)航

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

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

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

1. 模板 props

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

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

舉個(gè)栗子：

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

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

這個(gè)組件采用 message prop 并顯示它，就是如此簡(jiǎn)單。

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

轉(zhuǎn)換為 slot

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

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

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

<MyComponent>message 會(huì)被插入 slot</MyComponent>

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

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

模板 props vs slot

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

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

2. 配置 props

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

何時(shí)使用每種類型的 props

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

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

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