vue 3 defineprops接收一个对象

在 Vue 3 中，`defineProps` 是一个编译器宏，它允许你在 `<script setup>` 语法中声明组件的 props。与 Vue 2 不同，Vue 3 不再使用 `.props` 选项来定义 props。相反，你可以直接在 `<script setup>` 中使用 `defineProps` 来定义 props，而无需在 `export default` 对象中声明它们。

当你使用 `defineProps` 接收一个对象时，这个对象包含了组件接收到的所有 props 的定义。这意味着你可以为每个 prop 指定类型、默认值、是否必须等。

下面是一个使用 `defineProps` 接收一个对象来定义 props 的例子：

<script setup>
// 定义一个对象来描述 props
const props = defineProps({
  propA: Number,
  propB: String,
  propC: {
    type: Object,
    required: true
  },
  propD: {
    type: Array,
    default: () => []
  }
})

// 在组件中使用 propA 和其他 props
console.log(props.propA)
</script>

在上面的代码中，`propA` 被定义为一个 `Number` 类型的 prop，`propB` 是一个 `String` 类型的 prop，`propC` 是一个必需的 `Object` 类型的 prop，而 `propD` 是一个数组，其默认值是一个返回空数组的函数。

请注意，`defineProps` 仅在 `<script setup>` 中可用。如果你不是在 `<script setup>` 中使用组件，应该使用组件选项对象的 `props` 属性来定义 props。