defineProps 解构

`defineProps` 是 Vue 3 中的一个 API，通过它可以方便地定义组件的 props。

在 Vue 3 中，使用 `defineProps` 定义 props 的方式与 Vue 2 中略有不同。在 Vue 2 中，我们需要在组件选项中声明一个 `props` 字段，然后在子组件中通过 `this.$props` 或 `this._props` 来访问它们。而在 Vue 3 中，我们可以使用 `defineProps` 直接为组件定义 props，这样可以更加简单、直接地管理组件的 props。

`defineProps` 接收一个对象作为参数，该对象的属性就是组件的 props。每个属性的值可以是一个对象，用于指定该 prop 的类型、默认值等。例如：

import { defineComponent, defineProps, string, number } from 'vue'

const MyComponent = defineComponent({
  props: defineProps({
    name: {
      type: string,
      default: 'Tom'
    },
    age: {
      type: number,
      default: 18
    }
  }),
  setup(props) {
    console.log(props.name) // 'Tom'
    console.log(props.age) // 18
    // ...
  }
})

在上面的例子中，我们使用 `defineProps` 定义了两个 props：`name` 和 `age`。其中，`name` 是字符串类型，`age` 是数字类型，它们都有默认值。在 `setup` 函数中，我们可以通过 `props` 参数来访问这些 props。

需要注意的是，使用 `defineProps` 定义的 props 是只读的，不能在子组件中修改它们的值。如果需要在子组件中修改 props，可以通过 `emit` 事件来通知父组件进行修改。