Vue中的三种Props:模板Props、配置Props和状态Props详解

Vue 里有个很重要的东西，就是 Props。

Props 是用来在 Vue 组件之间传递数据的，就像你把东西从一个盒子搬到另一个盒子一样，从父组件传到子组件。

但你知道吗？Props 也有不同的类型，它们的功能可不一样呢！

主要有三种类型：

1. 模板 Props
2. 配置 Props
3. 状态 Props（也叫数据 Props）

接下来，我们就来详细了解一下这三种 Props，看看它们到底有什么区别，以及在什么情况下应该用它们。

1. 模板 Props

想象一下，你正在写一个 Vue 组件，你想往里面传一些文字，比如一个按钮的文字，或者一条提示信息。这时候，模板 Props 就派上用场了！

模板 Props 就像一个“占位符”，直接写在组件的模板里面，用来显示数据。它不能用来控制组件的方法或计算属性，只能显示文字或简单的值。

看个简单的例子：

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

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

这个组件接收一个 message props，然后直接在页面上显示它。

是不是很简单？

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

你随时可以用插槽来替换模板 Props，这样你的组件就能变得更加灵活。

转换为插槽

我们上面的例子，可以用插槽来改写：

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

现在，你不需要再传递 message 作为 props 了，而是这样使用组件：

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

插槽可以传递的不仅仅是文字，还可以是 HTML 代码，甚至其他组件。所以，把模板 Props 转换成插槽，会让你的组件变得更加强大，更加灵活。

不过，从插槽再转换回模板 Props 就比较麻烦了。

插槽可以做模板 Props 能做的一切，甚至更多。但你不能把 HTML 或组件当作 props 传递（至少不推荐这么做）。

为什么要费心？

了解什么时候用模板 Props，什么时候用插槽，可以帮助你设计出更棒的组件。

简单易用，就选模板 Props；灵活多变，就选插槽！

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

2. 配置 Props

配置 Props 就像一个“开关”，用来控制组件的行为和外观。它们不会直接传递数据，而是用来调整组件的样式或功能。

假设你有一个 Button 组件。

你想让它根据不同的使用场景显示不同的样式，比如“主要按钮”、“次要按钮”或者“危险按钮”。你可以使用 variant props 来控制按钮的样式：

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

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

这个 variant props 就是一个配置 Props。

它根据 variant 的值来改变按钮的样式。你可以传递 “primary”、“secondary” 或 “danger”，就能得到不同的按钮样式（当然，你需要提前写好这些样式）。

配置 Props 非常灵活，你可以用它来控制组件的功能，调整样式，或者修改组件的行为，非常适合创建可重用和可定制的组件。

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

接下来，我们将看看状态 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 就是一个状态 Props。

它包含了组件需要渲染列表的数据。当 items 发生变化时，Vue 的反应式系统会自动更新组件。

状态 Props 在组件内部处理数据时非常重要，它与 Vue 的反应式系统协同工作，确保 UI 与应用程序的状态保持一致。

Vue 状态管理的演变

Vue 处理状态管理的方式一直在发展。

早期的版本主要依赖于状态 Props 和 Vue 的反应式系统。

后来，出现了 Vuex，以及后来的 Pinia 和 Composition API，这些工具提供了更加结构化的状态管理方法。但是，状态 Props 仍然是 Vue 的基础部分，特别是用来将数据从父组件传递到子组件时。

何时使用何种类型的 Props

现在我们已经了解了三种类型的 props，接下来要学习的是如何选择合适的 props 类型。

选择哪种类型的 props 取决于你希望组件做什么：

• 模板 Props: 用于简单的数据传递，直接在模板中显示，尤其是数据是静态的，不是用户数据时。
• 配置 Props: 当你需要调整组件的行为或外观时，通常是布尔值或枚举。
• 状态 Props: 最适合动态数据，即随着时间变化的数据，例如数据库中的数据。

当然，如果你想更深入地学习这些内容，可以去我的课程 可重用组件 看看，课程中会更详细地讲解这些内容。

总结

Props 是 Vue 的核心功能，让组件之间能够通信，并且可以动态地更新。

理解三种类型的 props——模板 Props、配置 Props 和状态 Props——可以帮助你设计出更棒的组件。每种类型都有其应用场景，具体取决于你的组件需求。

这些概念是理解如何创建更可重用组件的基础，也是可重用性六个级别中的前几个级别中至关重要的知识。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。