vue3 definProps

在 Vue 3 中，defineProps 是一个在 <script setup> 语法糖中使用的函数，用于声明组件接收的 props。这个语法糖简化了组件的编写，使得我们可以在更紧凑和直观的方式中定义和使用 props。

使用 defineProps，你可以定义组件期望接收的属性（props），并为其指定类型、默认值等。这样，Vue 可以在运行时对传入的 props 进行验证，以确保它们符合预期的格式和类型。

使用示例：

假设你有一个 MyComponent 组件，它接受一个名为 title 的字符串类型的 props 和一个名为 isActive 的布尔类型的 props。你可以这样使用 defineProps 来定义它们：

vue<template>
<div>
<h1>{{ title }}</h1>
<button :disabled="!isActive">点击我</button>
</div>
</template>

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

const props = defineProps({
title: {
type: String,
required: true,
default: '默认标题'
},
isActive: {
type: Boolean,
default: false
}
})
</script>

在上面的例子中，我们首先从 'vue' 中导入了 defineProps 函数。然后，我们使用 defineProps 定义了一个对象，该对象描述了 title 和 isActive 这两个 props 的类型、是否必需以及默认值。最后，我们将定义好的 props 对象赋值给了常量 props（尽管在 <script setup> 中我们实际上可以直接使用这些 props，而不需要将它们赋值给一个变量）。

在模板中，我们可以直接使用这些 props，就像使用组件内部的响应式数据一样。Vue 会自动处理 props 的响应性，并在父组件更新这些 props 时更新组件的状态。

注意，<script setup> 是 Vue 3 中引入的一种新的组件语法，它允许你在同一个 <script> 标签中同时编写组件的逻辑和模板，而无需显式导出组件对象。这使得组件的代码更加简洁和易于维护。在使用 <script setup> 时，你不需要显式地导出 props，因为它们会自动暴露给模板和其他 <script setup> 中的代码