vue3中语法糖怎么用props

在Vue 3中，使用 `props` 语法糖定义组件的props属性非常简单，只需要在组件选项中添加一个 `props` 属性，值为一个包含props属性名和类型的对象即可。

下面是一个示例：

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: String // 定义名为message的字符串类型props属性
    }
  }
</script>

在上面的示例中，我们定义了一个名为 `message` 的字符串类型的props属性。在组件中，我们可以通过 `this.message` 访问这个props属性的值。

如果你希望定义多个props属性，可以使用类似下面的语法：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      title: String, // 定义名为title的字符串类型props属性
      message: String // 定义名为message的字符串类型props属性
    }
  }
</script>

在上面的示例中，我们定义了两个props属性，分别为 `title` 和 `message`。在组件中，我们可以通过 `this.title` 和 `this.message` 访问这两个props属性的值。

需要注意的是，在Vue 3中，props属性默认是必需的，如果你想要一个可选的props属性，可以使用类似下面的语法：

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String, // 定义名为message的字符串类型props属性
        default: 'Hello, world!' // 设置默认值为'Hello, world!'
      }
    }
  }
</script>

在上面的示例中，我们为 `message` props属性设置了一个默认值 `'Hello, world!'`。这样，如果在组件中没有传递 `message` 属性，组件就会使用默认值。