vue3中接收props的两种写法

没资格抱怨2025-03-11 12:32

在 Vue 3 中，接收 props 有两种主要的写法，分别是运行时声明 和基于类型的声明。下面为你详细介绍这两种写法。

1. 运行时声明

运行时声明是 Vue 2 中就已经存在的方式，在 Vue 3 中依然可以使用。这种方式通过在组件中使用 defineProps 宏来定义 props，并且可以指定 props 的类型、默认值和验证规则。

示例代码

TypeScript 复制代码

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script setup>
// 使用运行时声明接收props
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 18
  }
});
</script>

代码解释

defineProps 是一个宏，用于定义组件的 props。
name 和 age 是定义的两个 props。
- name 是一个必需的字符串类型的 prop。
- age 是一个可选的数字类型的 prop，默认值为 18。

2. 基于类型的声明

基于类型的声明是 Vue 3 新增的特性，它利用 TypeScript 的类型系统来定义 props。这种方式更加简洁，并且可以提供更好的类型检查。

示例代码

TypeScript 复制代码

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script setup lang="ts">
// 使用基于类型的声明接收props
interface Props {
  name: string;
  age?: number;
}

const props = defineProps<Props>();
</script>

代码解释

首先定义了一个 Props 接口，用于描述 props 的类型。
name 是一个必需的字符串类型的 prop。
age 是一个可选的数字类型的 prop。
defineProps<Props>() 使用泛型来指定 props 的类型。

两种写法的对比

运行时声明：适用于不使用 TypeScript 的项目，或者需要定义复杂的验证规则和默认值的场景。
基于类型的声明：适用于使用 TypeScript 的项目，它可以提供更好的类型检查和代码提示。

使用组件

无论使用哪种方式声明 props，使用组件时传递 props 的方式是相同的。

TypeScript 复制代码

<template>
  <MyComponent name="John" age="25" />
</template>

<script setup>
import MyComponent from './MyComponent.vue';
</script>

以上就是 Vue 3 中接收 props 的两种主要写法。