vue3+ts-setup语法糖(props)

vue3+ts-setup语法糖(props)

vue3 新增了组合式api的语法糖，相应的props，也会有相应的变化。下面是我总结的三种。

<script setup lang="ts">
// 第一种： 使用这种方式可以设置props的 默认值 和 类型 和 是否可选
// const props = defineProps({
//   message: {
//     type: String,
//     required: true
//   },
//   selectCode: {
//     type: String,
//     default: '2001'
//   }
// })



// 第二种：ts 纯声明方式 这种方式不能设置默认值
// type Props = {
//   message: string
//   selectCode: string
// }
// const props = defineProps()



// 第三种： 那么可以使用 withDefaults
type Props = {
  message: string
  selectCode: string
}
const props = withDefaults(defineProps<Props>(), {
  message: 'button',
  selectCode: 'green'
})



// 注意 defineProps 与 withDefaults 都有一个返回值，
// 返回的是一个props对象，这个对象包含所有的props属性
console.log(props)
</script>