vue3 script setup props

在Vue 3中，使用`<script lang='ts' setup>`标签可以声明props。有几种不同的方式可以声明props。

1. 使用`defineProps`API：此方式只能设置参数类型和是否必传。在`defineProps`中定义一个类型，可以使用TypeScript特性进行限定。例如：

const props = defineProps<{ either: '必传且限定'|'其中一个'|'值', child?: string|number, strData?: string, arrFor: any[] }>();

2. 使用`withDefaults`和`defineProps`：在第一种方式的基础上，增加了设置prop默认值的功能。例如：

interface Props {
  either: '必传且限定'|'其中一个'|'值',
  child: string|number,
  sda?: string,
  strData: string,
  msg?: string,
  labels?: string[],
  obj?:{a:number}
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two'],
  obj: () => {
    return {a:2}
  }
});

3. 运行时声明的方式：只能设置参数类型、默认值、是否必传、自定义验证。此方式报错为控制台warn警告，无法提供编辑器代码提示功能。例如：

const props = defineProps({
  child: {
    type:String,
    default: 1,
    required: true,
    validator: value => {
      return value >= 0
    }
  },
  sda: String,
  strData: String,
  arrFor: Array
});

综上所述，Vue 3的`<script lang='ts' setup>`标签可以用来声明props，提供不同的方式来设置参数类型、默认值、是否必传和自定义验证。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [【vue3 ＜script setup＞ props 使用与讲解】defineProps、withDefaults 类型限制、默认值设置](https://blog.csdn.net/m0_67401228/article/details/123304831)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]