vue3 props 参数

### Vue3 中 `props` 参数详解

#### 定义 Props 方式

在 Vue3 组件中定义 `props` 可以通过多种方式进行。一种常见的方式是在 `<script setup>` 语法糖内使用 `defineProps()` 函数来接收父组件传递的数据[^1]。

对于简单的场景，可以采用字符串数组的形式快速声明所需属性：

<script setup lang="ts">
const props = defineProps(['title', 'content'])
console.log(props.title, props.content)
</script>

这种方式适用于只需要简单类型的 prop 场景，并且不需要额外配置验证规则[^2]。

#### 使用对象形式定义复杂 Prop 类型

当需求变得更加复杂时，则推荐利用对象字面量的方式来定义更详细的类型信息以及默认值等特性：

<script setup lang="ts">
interface MyComponentProps {
    title?: string;
    content: string | number;
}

const props = withDefaults(defineProps<MyComponentProps>(), {
    title: "Default Title",
});
</script>

这里不仅限定了各个字段的具体数据类型，还设定了部分可选项及其缺省状态。

#### 动态传参实例展示

实际开发过程中经常遇到动态绑定的情况，比如从路由参数获取 ID 并作为子组件的一个重要输入源之一：

<template>
  <!-- 子组件 -->
  <ChildComponent :id="$route.params.id"></ChildComponent>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 假定这是 ChildComponent.vue 文件中的内容
const props = defineProps({
  id: String,
})
</script>

上述例子展示了如何将来自外部环境的信息安全有效地注入到内部逻辑当中去处理。