vue3+ts-setup语法糖(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>