props选项

在 Vue 3 中，props 选项用于定义组件的属性（props）。通过使用 props 选项，你可以指定组件接受的属性及其类型、默认值、验证规则等。

下面是一个示例，展示了如何在 Vue 3 中使用 props 选项：

export default {
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true,
      default: 'Default Title',
      validator: (value) => {
        return value.length <= 50;
      }
    },
    count: {
      type: Number,
      default: 0
    }
  },
  // ...
}

在上面的代码中，我们在组件的选项对象中定义了 props 选项。props 选项的值是一个对象，其中的属性名是属性的名称，属性值是一个对象，用于指定该属性的配置。

在示例中，我们定义了两个属性：title 和 count。title 属性是一个必需的字符串类型，它没有默认值，且使用了一个自定义的验证函数来验证属性值的长度是否小于等于50。count 属性是一个可选的数字类型，它的默认值为 0。

使用 props 选项定义的属性可以在组件的模板中通过插值表达式或绑定语法来使用。例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
  </div>
</template>

在模板中，我们可以直接引用 props 中定义的属性，如 {{ title }} 和 {{ count }}。

通过使用 props 选项，你可以明确地定义组件的属性，并指定其类型、默认值和验证规则。这样可以提高组件的可维护性和可靠性，并帮助开发人员更好地理解组件的用法和预期的属性值。