目录
defineProps
先声明一个类型,比如
export type TableProps = {
data: Object[]
columns: Array<{ label: string; prop: string }>
stripe: boolean
}
然后使用defineProps接收这个类型
<script setup lang="ts">
import type { TableProps } from './types'
const props = defineProps<TableProps>()
</script>
这样 props 的类型就定义好了,在父组件中可以这样使用
<template>
<table :data="data" :columns="columns" :stripe="true"></table>
</template>
另外需要定义 props 的默认值可以使用 withDefaults
<script setup lang="ts">
import type { TableProps } from './types'
const props = withDefaults(defineProps<TableProps>(), {
data: {},
stripe: false
})
</script>
defineEmits
声明自定义事件和入参类型
<script setup lang="ts">
const emit = defineEmits<{
update: (data: Record<string>) => void
sort: (value: boolean) => void
}>()
</script>
父组件接收事件
<template>
<table :data="data" :columns="columns" @sort="onSort"></table>
</template>
defineSlots
声明插槽和插槽作用域参数类型
<script setup lang="ts">
defineSlots<{
header: (props: { name: string; age: number }) => void
footer: (value: boolean) => void
}>()
</script>
父组件使用插槽,使用插槽参数
<template>
<table :data="data" :columns="columns">
<template #header="{ name, age }">
<div>{{ name }} - {{ age }}</div>
</template>
</table>
</template>
generic
使用 generic
可以准确的推断类型,方便在模板里面可以有准确的类型提示
可以使用 <script>
标签上的 generic
属性声明泛型类型参数
<script setup lang="ts" generic="T">
defineProps<{
columnItem: T
columns: T[]
}>()
</script>
也可以多个泛型类型参数
<script setup lang="ts" generic="T, U extends { label: string }">
defineProps<{
columnItem: T
columns: T[]
data: U[]
}>()
</script>