vue3+ts-setup语法糖(props)

时间:2025-04-08 08:12:36
<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>