Vue3中Props传参：轻松掌握多种数据类型传参方式

2024-01-21 17:52:37

Vue 3 中 Props 的全面指南：接收父组件数据的强大工具

在 Vue 3 中，Props 是一个极其重要的概念，它赋予子组件从其父组件获取数据的强大功能。理解 Props 的用法对于创建交互性和可重用的组件至关重要。在这篇博客中，我们将深入探究 Vue 3 Props 的方方面面，从基本用法到高级技巧。

什么是 Props

Props 是一个特殊对象，允许子组件从其父组件接收数据。它们类似于函数的参数，用于将数据从一个组件传递到另一个组件。Props 可以包含任何类型的数据，包括基本类型（字符串、数字、布尔值）和引用类型（对象、数组）。

基本类型传参

传递基本类型的 Props 非常简单。您只需在子组件的模板中使用 v-bind 指令，并在父组件中传递相应的属性：

<!-- 父组件 -->
<template>
  <child-component :message="'Hello Vue 3'"></child-component>
</template>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message'],
};
</script>

引用类型传参

传递引用类型 Props 也同样容易。只需将数据对象或数组作为 Props 值传递即可：

<!-- 父组件 -->
<template>
  <child-component :user="{ name: 'John Doe', age: 30 }"></child-component>
</template>

<!-- 子组件 -->
<template>
  <p>{{ user.name }}</p>
  <p>{{ user.age }}</p>
</template>

<script>
export default {
  props: ['user'],
};
</script>

默认和必填参数

在 Vue 3 中，Props 可以设置 default 和 required 参数。default 参数指定了 Props 的默认值，当父组件没有传递该 Props 时，子组件将使用默认值。required 参数指定了该 Props 是否必传，当父组件没有传递该 Props 时，子组件将抛出错误。

例如：

<!-- 父组件 -->
<template>
  <child-component :message="'Hello Vue 3'"></child-component>
</template>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello World',
      required: true,
    },
  },
};
</script>

Props 验证

Props 验证是确保传递给子组件的数据具有所需类型和格式的重要功能。Vue 3 提供了内置的验证器，可用于检查 Props 类型、长度、范围等。

<template>
  <child-component :user="{ name: 'John Doe', age: 30 }"></child-component>
</template>

<script>
import { required, minLength, maxValue } from 'vuelidate/validators';

export default {
  props: {
    user: {
      type: Object,
      required,
      validator: {
        name: {
          required,
          minLength: 3,
        },
        age: {
          required,
          maxValue: 150,
        },
      },
    },
  },
};
</script>