defineProps实例

`defineProps` 是 Vue 3 中的一个 API，用于定义组件的 props。它允许我们以对象的形式定义组件的 props，并提供了一些配置选项来指定 prop 的类型、默认值、验证规则等。

以下是一个 `defineProps` 的示例：

import { defineProps } from 'vue';

export default {
  props: {
    msg: {
      type: String,
      required: true,
      default: 'Hello, world!',
      validator: (value) => value.length <= 10,
    },
    count: Number,
  },
  setup() {
    const props = defineProps({
      msg: String,
      count: {
        type: Number,
        default: 0,
      },
    });

    // 使用 props 中的属性
    console.log(props.msg); // 访问 msg prop
    console.log(props.count); // 访问 count prop

    return {
      props,
    };
  },
};

在这个示例中，我们使用 `defineProps` 来定义组件的 props。`msg` prop 是一个必需的字符串类型，它的默认值为 `'Hello, world!'`，并且有一个自定义的验证规则来限制长度不超过 10。`count` prop 是一个可选的数字类型，它的默认值为 0。

在 `setup` 函数中，我们调用 `defineProps` 并传入一个包含 props 的对象。然后，我们可以通过 `props` 对象来访问这些 props 的值。

请注意，`defineProps` 只能在 `setup` 函数内部使用，并且只能用于 Vue 3 的 Composition API。