你可能不知道的 Vue 中的 3 种 props

大家好，这里是大家的林语冰。

Vue 的核心功能之一在于 props 的使用。props 是我们在 Vue 中从父组件到子组件传递数据的方式。

但并非所有 props 都是一样的。

本文我们主要会科普 3 种不同的 props：

1. 模板 props（template props）
2. 配置 props（configuration props）
3. 状态 props 或 数据 props（state props/data props）.

我们会深入学习这三种不同类型的 props，看看它们有何不同，以及何时使用它们。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 3 Kinds of Props in Vue。

1. 模板 props

假设我们正在构建一个 Vue 组件。我们想要向其中传递某些文本 —— 比如按钮标签或提示消息。这就是模板 props 的用武之地。

模板 props 可以直接在组件的模板中使，但它们不适用于方法或计算 ref，能且仅能用于模板。

举个栗子：

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

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

这个组件采用 message prop 并显示它，就是如此简单。

但模板 props 有一个独特的特征，它们类似于 slot。我们始终可以用 slot 替换模板 props，从而获得更大的灵活性。

转换为 slot

举个栗子，我们使用 slot 重构上文的模板 props：

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

然后我们可以这样使用这个组件，而不是将 message 作为模板 props 传递：

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

slot 允许我们传递的不仅仅是文本，我们也可以包含 HTML 或其他组件。这就是为什么将模板 props 转换为 slot 可能是一个给力的重构。这可以让我们的组件更加灵活。

slot 可以实现模板 props 的所有功能，甚至有过之而无不及。我们不能将 HTML 或组件作为模板 props 传递。

模板 props vs slot

知道何时使用模板 props 或 slot 可以辅助我们设计更好的组件。

如果我们需要简单性，模板 props 就恰到好处。如果考虑灵活性，slot 是正确的选择。

2. 配置 props

配置 props 都是关于改变组件的行为方式的。它们不像状态 props 那样传递数据。相反，它们调整组件的外观或功能。

假设我们有一个 Button 组件。我们希望它根据使用地点的不同，而看起来有所不同。variant 属性可以控制其样式：

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

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

这个 variant 属性是一个配置 props。它根据按钮的值更改按钮的类。我们可以传递 primary/secondary/danger，从而更改按钮的外观。

配置 props 也非常通用。我们可以使用它们来切换功能、调整样式或修改组件行为。它们对于创建可重用且适应性强的组件特别有用。

这就是为什么它们是第二个可重用性级别的核心部分：配置。

3. 状态 props 或数据 props

状态 props 的作用就是将动态数据传递到组件中。它们是使组件具有交互性、并响应用户输入的关键。

假设我们有一个列表组件，它会显式我们传递给它的子元素：

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

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

items 属性是一个状态 props。它包含组件渲染其列表所需的数据。当 items 发生变化时，Vue 的响应式系统可确保组件自动更新。

状态 props 对于处理组件内的数据至关重要。它们与 Vue 的响应性密切配合，使我们的 UI 与 App 的状态保持同步。

Vue 中状态管理的演变

Vue 的状态管理方法多年来一直与时俱进。早期版本严重依赖状态 props 和 Vue 自己的响应式系统。

之后，诸如 Vuex、Pinia 和组合式 API 之类的解决方案提供了更加结构化的方式来管理状态。但状态 props 仍然是 Vue 的基本组成部分，尤其是对于将数据从父组件传递到子组件而言。

何时使用每种类型的 props

现在我们知道了这三种道具，我们需要知道它们的实际使用场景。

选择正确类型的 props 取决于我们需要组件执行的操作。以下是若干基本准则：

• 使用模板 props 进行直接显示在模板中的简单数据传递。尤其是如果该数据是静态的，而不是用户数据。
• 当我们需要调整组件的行为或外观时，请选择配置 props。通常这些是布尔值或枚举。
• 状态 props 最适合随时间变化的动态数据。比如存储在数据库中（或可能存储在数据库中）的任何内容。

高潮总结

props 是 Vue 的核心功能，使组件能够通信并保持动态。

了解这三种模板 props、配置 props 和状态 props，可以辅助我们设计更好的组件。每种类型的 props 都有其用武之地，具体取决于组件的需求。

本期话题是 —— 你使用 Vue 时，是否会根据业务需求划分更多类型或使用场景的 props？

欢迎在本文下方自由言论，文明共享。谢谢大家的点赞，掰掰~

《前端猫猫教》每日 9 点半更新，坚持阅读，自律打卡，每天一次，进步一点。