vue3.2之defineProps

郑建零零发

已于 2023-06-03 16:57:15 修改

阅读量1.6k

点赞数

文章标签：数学建模

于 2023-06-03 16:41:16 首次发布

本文链接：https://blog.csdn.net/qq_52421092/article/details/131022844

版权

文章介绍了在Vue3中声明组件Props的两种方式：一种是运行时声明，使用`<scriptsetup>`语法；另一种是使用TypeScript的类型声明，结合`interface`定义数据结构。同时，文章还展示了如何给Props设置默认值，利用`withDefaults`函数可以为Props提供默认值。

摘要由CSDN通过智能技术生成

一、方式一（运行时声明）

二、类型声明

三、总结

一、方式一（运行时声明）

<script setup>
defineProps({
    title: {
        type: String,
        default: '这是一个标题',
    },
    list: {
        type: Array,
        default: [],
    },
})
</script>

二、类型声明

<script setup lang="ts">
interface List {
    id: number,
    content: string,
}
defineProps<{
    title: string,
    list: List[],
}>()
</script>

withDefaults的参数二是写默认值

<script setup lang="ts">
interface List {
    id: number,
    content: string,
}
withDefaults(defineProps<{
    title: string,
    list: List[],
}>(), {
    title: '我是一个默认值'
})
</script>