Vue 中的三种 Props：模板 Props、配置 Props 和状态 Props

Vue 里有个很重要的东西，就是 Props。Props 是用来在 Vue 组件之间传递数据的，就像你把东西从一个盒子搬到另一个盒子一样，从父组件传到子组件。但你知道吗？Props 也有不同的类型，它们的功能可不一样呢！主要有三种类型：模板 Props配置 Props状态 Props（也叫数据 Props）接下来，我们就来详细了解一下这三种 Props，看看它们到底有什么区别，以及在什么情况下应该

前端开发博客

1510人浏览 · 2024-07-03 08:30:29

前端开发博客 · 2024-07-03 08:30:29 发布

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

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

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

主要有三种类型：

模板 Props
配置 Props
状态 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 与应用程序的状态保持一致。