学习Vue3的defineProps方法

在Vue 3中，defineProps方法是一个重要的API，用于定义组件的Props属性。通过defineProps，我们能够更加灵活地声明和使用组件的属性，同时享受到类型检查和智能提示的好处。

1. 基本用法

defineProps方法是在 <script setup> 环境下使用的，这是Vue 3中推荐的语法糖，可以更紧凑地书写组件。以下是defineProps的基本用法：

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['prop1', 'prop2']);
</script>

在上述代码中，我们通过defineProps定义了两个Props属性：prop1和prop2。此时，这两个属性将会被映射到组件的props选项中。

2. 类型检查

defineProps方法不仅仅是用来声明Props，还可以结合TypeScript等类型系统进行类型检查。我们可以通过对象的方式来定义Props，并为每个属性指定类型：

<script lang="ts" setup>
interface MyProps {
  prop1: string;
  prop2: number;
}

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

这样，我们就为prop1指定了string类型，为prop2指定了number类型。在使用组件时，Vue会根据这些类型信息进行编译时的类型检查，有效避免了一些潜在的错误。

3. 默认值

使用defineProps时，还可以为Props属性设置默认值。这可以通过在定义Props时，使用对象而非数组，并为每个属性设置default属性来实现：

<script setup>
const props = defineProps({
  prop1: {
    type: String,
    default: 'Default Value'
  },
  prop2: {
    type: Number,
    default: 42
  }
});
</script>

在上述示例中，如果在使用组件时未传递相应的Props属性，Vue将会使用我们设置的默认值。

4. 示例代码

让我们通过一个简单的示例来演示defineProps的应用。假设我们有一个显示用户信息的组件：

<template>
  <div>
    <h2>{{ username }}</h2>
    <p>{{ age }} years old</p>
  </div>
</template>

<script lang="ts" setup>
interface UserInfoProps {
  username: string;
  age: number;
}

const props = defineProps<UserInfoProps>();

// 使用props中的属性
const { username, age } = props;
</script>

在这个示例中，我们通过defineProps声明了两个Props属性：username和age。然后在模板中使用这两个属性，同时享受到了类型检查的好处。