vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue中三种props区别和用法

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

作者：前端猫猫教

Vue 的核心功能之一在于 props 的使用,props 是我们在 Vue 中从父组件到子组件传递数据的方式,但并非所有 props 都是一样的,本文我们会深入学习这三种不同类型的 props,看看它们有何不同,以及何时使用它们,需要的朋友可以参考下

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

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

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

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

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 是 Vue 的核心功能，使组件能够通信并保持动态。

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

到此这篇关于深入探究Vue中三种不同的props的文章就介绍到这了,更多相关Vue三种不同的props内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文