你写一个vue3 props的基本使用

Vue3的props是用来传递数据给子组件的。下面是一个基本的使用示例：

父组件模板：

<template>
  <child-component :prop1="parentData"></child-component>
</template>

父组件脚本：

import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Hello World'
    }
  }
})

子组件模板：

<template>
  <div>{{ prop1 }}</div>
</template>

子组件脚本：

import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    prop1: {
      type: String,
      required: true
    }
  }
})

在父组件中，我们通过属性绑定将`parentData`传递给了子组件的`prop1`属性。在子组件中，我们使用`props`选项声明了一个名为`prop1`的属性，并指定了它的类型为字符串，同时设置了`required: true`，表示这是一个必填属性。

在子组件中，我们可以直接使用`prop1`来访问这个属性，它的值将会是`parentData`。如果父组件没有传递`prop1`，或者传递的类型不是字符串，Vue3将会在开发模式下发出警告。