在 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 的两种主要写法。