1.props标注类型
原因:确保给组件传递的props是类型安全的
<script setup lang="ts">
//1.使用别名类型或者接口定义Props类型
type Props = {name:stringage?:number
}
//2 使用defineProps注解类型
const props = defineProps<Props>()
</script>
2. props默认值设置
Props中的可选参数通常除了指定类型之外还需要提供默认值,可以使用widthDefaults来进行设置
2.1 widthDefaults 设置默认值
<script setup lang="ts">type Props = {name:stringsize?:string
}
const props = widthDefaults( defineProps<Props>() ,{size:'middle'
})
</script>
2.2 解构设置默认值
问题会丢失响应式
<script setup lang="ts">
type Props = {name:stringsize?:string
}
const {name ,size='middle'} = defineProps<Props>()
</script>
解决丢失响应式的方法