Vue 3.3 新功能defineProps、defineEmits、defineSlots、generic的使用

目录

defineProps

defineEmits

defineSlots

generic 

---

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>