vue3.0 + ts + setup语法糖， 组件传值 类型注解

vue3.0 + ts + setup语法糖， 组件传值 类型注解

• withDefaults 和 defineProps 不用引入可以直接使用

有默认值

• 第一种(通过解构方式)

<script lang="ts" setup>
interface Props {
    name?: string
}
const { name = 'yang'} = defineProps<Props>()
</script>

• 第二种(使用withDefaults)

<script lang="ts" setup>
interface Props {
    name?: string;
    age: number;
}
const props = withDefaults(defineProps<Props>(), {
    name: 'yang',
    age: 18
})
</script>