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<Props>()
// 第三种： 那么可以使用 withDefaults
type Props = {
message: string
selectCode: string
}
const props = withDefaults(defineProps<Props>(), {
message: button,
selectCode: green
})
// 注意 defineProps 与 withDefaults 都有一个返回值，
// 返回的是一个props对象，这个对象包含所有的props属性
console.log(props)
</script>
