vue3中接收props的两种写法

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

1. 运行时声明

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

示例代码

<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。这种方式更加简洁，并且可以提供更好的类型检查。

示例代码

<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 的方式是相同的。

<template><MyComponent name="John" age="25" />
</template><script setup>
import MyComponent from './MyComponent.vue';
</script>

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