【vue3 ＜script setup＞ props 使用与讲解】defineProps、withDefaults 类型限制、默认值设置

• 本章主要涉及api内容：defineProps、withDefaults；

• defineProps 只能是要么使用`运行时声明`，要么使用`类型声明`。同时使用两种声明方式会导致编译报错。；

• defineProps、withDefaults 是只在

---

例子1 > 运行时声明 的方式只能设置参数类型、默认值、是否必传、自定义验证。报错为控制台warn警告。

若想设置[ 编辑器报错、编辑器语法提示 ]则需要使用类型声明的方式。

<script lang='ts' setup>
const props = defineProps({
  child: {
    type:String, // 参数类型
    default: 1, //默认值
    required: true, //是否必传
    validator: value => {
      return value >= 0 // 除了验证是否符合type的类型，此处再判断该值结果是否符合验证
    }
  },
  sda: String, //undefined
  strData: String,
  arrFor: Array
})
</script>

子组件声明了的props ，若父组件未传，则该值为 undefined

---

例子2 > 类型声明的方式1：defineProps 单独使用该api，只能设置是否必传和参数类型。&#