vue3.3最新发布defineProps,generic,defineEmits,defineSlots教程

vue3.3最新发布defineProps,generic,defineEmits,defineSlots教程

以下内容是目前vue3.3版本部分发布内容的比较详细的使用方法，如果有不对的地方，欢迎指出.

我会持续更新vue3的相关内容，谢谢！

此外，我还会定期更新最新的前端资讯，欢迎关注我，谢谢！

vue3.3已更新

---

defineProps的改进

---

比如我们有一个组件，它的接口是这样的

interface people{
    name:string,
    age:number
}
export type {people}

那我们在使用的时候，就可以这样

<script lang="ts" setup>
import {people} from './interface'
defineProps<people>()
</script>

<template>
  <h1>{{ name }}</h1>
</template>

在父组件中调用

<HelloWorld name="any" :age="20" />

子组件中的defineProps也可以使用多个条件

<script lang="ts" setup>
import {people} from './interface'
defineProps<people&{speak?:string}>()
</script>

<template>
  <h1>{{ name }}</h1>
  <h2>{{ speak }}</h2>
</template>

父组件

 <HelloWorld name="any" :age="20" speak="hello world"/>

感谢 @仟白 提供的反馈关于"使用3.3 的话 props默认值如何设置？"

withDefaults(defineProps<people>(),{
name:'anny',
age:20
})

通用类型 generic

---

这里继续使用上面的接口：

interface people{
    name:string,
    age:number
}

子组建中的defineProps可以使用通用类型

<script setup lang="ts" generic="U extends people">
import { people } from '../interface'
defineProps<{
  peopleObj:U
}>()
</script>

<template>
  <h1>{{ peopleObj }}</h1>
</template>

父组件中调用

<HelloWorld :peopleObj="{ name: 'any', age: 20 }" />

defineEmits 的改进

---

现在抛出事件的时候，我们可以更方便的设置事件的类型

看下之前的调用方法：

const emit = defineEmits<{
  (e: 'foo', id: number): void
}>()
emit('foo', 1)

父组件中调用

<HelloWorld @foo="foo" />

现在我们可以这样写：

const emit = defineEmits<{
  foo:[id:number]
}>()
emit('foo', 1)

父组件中调用

<HelloWorld @foo="foo" />

defineSlots 的使用

---

我们可以使用defineSlots来定义插槽的类型

首先看个例子，让我们定义一个插槽

<slot name="main"></slot>

父组件

  <HelloWorld >
    <template #main>
      <h1>hello world !</h1>
    </template>
  </HelloWorld>

可以看出来，以上一个具名插槽。

接下来我们将使用defineSlots来约束一个作用域插槽。

子组件：

<script setup lang="ts">
defineSlots<{
  main?: (props: { msg: string }) => any
}>()
</script>

<template>
  <slot name="main" msg="tony"></slot>
</template>

其中，defineSlots中的main就是我们定义的插槽名称，props就是我们定义的插槽的参数，any就是我们定义的插槽的返回值。

这里我们限制了插槽的名称为main，并且插槽的参数为msg，返回值为any。

看下父组件的调用：

  <HelloWorld >
    <template #main="slotProps">
      <h1>hello world {{slotProps.msg}}!</h1>
    </template>
  </HelloWorld>

需要注意的是，它们有一些限制：
当前的一些限制：

1. volar / vue-tsc 中尚未实现必需的插槽检查。
2. 插槽函数返回类型目前被忽略，可以是any，但我们将来可能会利用它来检查插槽内容。