Vue 里有個很重要的東西，就是 Props。

Props 是用來在 Vue 組件之間傳遞數(shù)據(jù)的，就像你把東西從一個盒子搬到另一個盒子一樣，從父組件傳到子組件。

但你知道嗎？Props 也有不同的類型，它們的功能可不一樣呢！

主要有三種類型：

1. 模板 Props
2. 配置 Props
3. 狀態(tài) Props（也叫數(shù)據(jù) Props）

接下來，我們就來詳細(xì)了解一下這三種 Props，看看它們到底有什么區(qū)別，以及在什么情況下應(yīng)該用它們。

1. 模板 Props

想象一下，你正在寫一個 Vue 組件，你想往里面?zhèn)饕恍┪淖?，比如一個按鈕的文字，或者一條提示信息。這時候，模板 Props 就派上用場了！

模板 Props 就像一個“占位符”，直接寫在組件的模板里面，用來顯示數(shù)據(jù)。它不能用來控制組件的方法或計算屬性，只能顯示文字或簡單的值。

看個簡單的例子：

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

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

這個組件接收一個 message props，然后直接在頁面上顯示它。

是不是很簡單？

但是，模板 Props 有個特別的地方，它跟插槽很像。

你隨時可以用插槽來替換模板 Props，這樣你的組件就能變得更加靈活。

轉(zhuǎn)換為插槽

我們上面的例子，可以用插槽來改寫：

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

現(xiàn)在，你不需要再傳遞 message 作為 props 了，而是這樣使用組件：

<MyComponent>Here's a message!</MyComponent>

插槽可以傳遞的不僅僅是文字，還可以是 HTML 代碼，甚至其他組件。所以，把模板 Props 轉(zhuǎn)換成插槽，會讓你的組件變得更加強(qiáng)大，更加靈活。

不過，從插槽再轉(zhuǎn)換回模板 Props 就比較麻煩了。

插槽可以做模板 Props 能做的一切，甚至更多。但你不能把 HTML 或組件當(dāng)作 props 傳遞（至少不推薦這么做）。

為什么要費(fèi)心？

了解什么時候用模板 Props，什么時候用插槽，可以幫助你設(shè)計出更棒的組件。

簡單易用，就選模板 Props；靈活多變，就選插槽！

接下來，我們來看看配置 Props，它跟模板 Props 又有什么不同。

2. 配置 Props

配置 Props 就像一個“開關(guān)”，用來控制組件的行為和外觀。它們不會直接傳遞數(shù)據(jù)，而是用來調(diào)整組件的樣式或功能。

假設(shè)你有一個 Button 組件。

你想讓它根據(jù)不同的使用場景顯示不同的樣式，比如“主要按鈕”、“次要按鈕”或者“危險按鈕”。你可以使用 variant props 來控制按鈕的樣式：

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

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

這個 variant props 就是一個配置 Props。

它根據(jù) variant 的值來改變按鈕的樣式。你可以傳遞 “primary”、“secondary” 或 “danger”，就能得到不同的按鈕樣式（當(dāng)然，你需要提前寫好這些樣式）。

配置 Props 非常靈活，你可以用它來控制組件的功能，調(diào)整樣式，或者修改組件的行為，非常適合創(chuàng)建可重用和可定制的組件。

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

接下來，我們將看看狀態(tài) Props，它用來管理組件內(nèi)部的數(shù)據(jù)。

3. 狀態(tài) Props（或數(shù)據(jù) Props）

狀態(tài) Props 就像一個“數(shù)據(jù)容器”，用來將動態(tài)數(shù)據(jù)傳遞到組件中。

它們是讓組件具有交互性和對用戶輸入做出反應(yīng)的關(guān)鍵。

想象一個用來顯示項(xiàng)目的列表組件：

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

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

items props 就是一個狀態(tài) Props。

它包含了組件需要渲染列表的數(shù)據(jù)。當(dāng) items 發(fā)生變化時，Vue 的反應(yīng)式系統(tǒng)會自動更新組件。

狀態(tài) Props 在組件內(nèi)部處理數(shù)據(jù)時非常重要，它與 Vue 的反應(yīng)式系統(tǒng)協(xié)同工作，確保 UI 與應(yīng)用程序的狀態(tài)保持一致。

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

Vue 處理狀態(tài)管理的方式一直在發(fā)展。

早期的版本主要依賴于狀態(tài) Props 和 Vue 的反應(yīng)式系統(tǒng)。

后來，出現(xiàn)了 Vuex，以及后來的 Pinia 和 Composition API，這些工具提供了更加結(jié)構(gòu)化的狀態(tài)管理方法。但是，狀態(tài) Props 仍然是 Vue 的基礎(chǔ)部分，特別是用來將數(shù)據(jù)從父組件傳遞到子組件時。

何時使用何種類型的 Props

現(xiàn)在我們已經(jīng)了解了三種類型的 props，接下來要學(xué)習(xí)的是如何選擇合適的 props 類型。

選擇哪種類型的 props 取決于你希望組件做什么：

• 模板 Props: 用于簡單的數(shù)據(jù)傳遞，直接在模板中顯示，尤其是數(shù)據(jù)是靜態(tài)的，不是用戶數(shù)據(jù)時。
• 配置 Props: 當(dāng)你需要調(diào)整組件的行為或外觀時，通常是布爾值或枚舉。
• 狀態(tài) Props: 最適合動態(tài)數(shù)據(jù)，即隨著時間變化的數(shù)據(jù)，例如數(shù)據(jù)庫中的數(shù)據(jù)。

當(dāng)然，如果你想更深入地學(xué)習(xí)這些內(nèi)容，可以去我的課程 可重用組件 看看，課程中會更詳細(xì)地講解這些內(nèi)容。

總結(jié)

Props 是 Vue 的核心功能，讓組件之間能夠通信，并且可以動態(tài)地更新。

理解三種類型的 props——模板 Props、配置 Props 和狀態(tài) Props——可以幫助你設(shè)計出更棒的組件。每種類型都有其應(yīng)用場景，具體取決于你的組件需求。

這些概念是理解如何創(chuàng)建更可重用組件的基礎(chǔ)，也是可重用性六個級別中的前幾個級別中至關(guān)重要的知識。

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論