企业官网建设流程全解析

一、父传子，子接收——声明组件接收的 props

1、最基础用法（不带 TypeScript）
const props = defineProps({
title: String,
count: Number,
visible: Boolean
})
带默认值
const props = defineProps({
title: {
type: String,
default: '默认标题'
},
count: {
type: Number,
default: 0
},
visible: {
type: Boolean,
default: true
}
})

2、TypeScript 推荐写法，使用泛型声明 props
interface Props {
title: string
count?: number
visible: boolean
}
const props = defineProps<Props>()
带默认值
方式1：（类型可复用）
interface Props {
title?: string
count?: number
visible?: boolean
list?: string[]
}
const props = withDefaults(defineProps<Props>(), {
title: '默认标题',
count: 0,
visible: true,
list: () => []
})
方式2：
const props = withDefaults(
defineProps<{
title?: string
count?: number
visible?: boolean
}>(),
{
title: '默认标题',
count: 0,
visible: true
}
)