vue3 组件 props

Vue3 中的组件 props 和 Vue2 中的 props 类似，都是用来定义组件的属性。在 Vue3 中，可以通过 defineComponent 函数来定义组件，并使用 props 选项来声明组件的 props。

例如：

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    message: String,
    count: {
      type: Number,
      default: 0,
    },
    isActive: {
      type: Boolean,
      default: false,
    },
    itemList: {
      type: Array,
      default: () => [],
    },
    userInfo: {
      type: Object,
      default: () => ({ name: '', age: 0 }),
    },
  },
});

在上面的代码中，我们定义了一个组件，并声明了 5 个 props：

- `message`：类型为 `String`，没有默认值。
- `count`：类型为 `Number`，默认值为 `0`。
- `isActive`：类型为 `Boolean`，默认值为 `false`。
- `itemList`：类型为 `Array`，默认值为一个空数组 `[]`。
- `userInfo`：类型为 `Object`，默认值为一个空对象 `({ name: '', age: 0 })`。

注意，Vue3 中的 props 不再支持 `required` 和 `validator` 选项，可以通过 TypeScript 或其他方式来进行类型检查和验证。另外，Vue3 中的 props 默认都是非响应式的，如果需要在组件内部修改 props 的值，可以使用 `emit` 方法来触发一个事件，再在父组件中监听该事件并更新 props。