当前位置：首页 > article >正文

vue3的defineSlots()

article 2024/11/5 2:51:24

这个主要是用于类型校验使用的，和 ts 一起对 slot 进行传递的值进行类型检查，主要在具名作用域插槽里面

先来看一下官网的说明，后面我会详细解释

接下来我们来看代码吧，我有一个文件夹，里面分别有一个父组件one 和一个插槽子组件two

父组件 one 的代码：

<script setup lang="ts">
import two from './two.vue'

console.log('1111')
</script>
<template>
  <div>
    <h1>这是容器组件</h1>
    <two>
      <template v-slot:header="{ data, data1, data2 }">
        <h3>{{ data }}</h3>
        <h3>{{ data1 }}</h3>
        <h3>{{ data2 }}</h3>
      </template>
    </two>
  </div>
</template>

<style lang="less" scoped></style>

插槽子组件 two 的代码：

<script setup lang="ts">
import { ref } from 'vue'
const data = ref('123')
const data1 = ref('456')
const data2 = ref(['789'])
</script>
<template>
  <div>
    <h2>这是有位置的组件</h2>
    <div>header</div>
    <slot name="header" :data="data" :data1="data1" :data2="data2"></slot>
    <div>default</div>
    <slot></slot>
    <div>footer</div>
    <slot name="footer"></slot>
  </div>
</template>

<style lang="less" scoped></style>

这是运行之后的页面

上述代码在 vscode 里面并没有任何报错或者提醒，说明代码是正常的，但是假如我们在插槽子组件中使用了 defineSlots() 对 slot 的属性进行标注，就会有提示

标注之后的插槽子组件 two 代码：

<script setup lang="ts">
import { ref } from 'vue'
const data = ref('123')
const data1 = ref('456')
const data2 = ref(['789'])

defineSlots<{
  // 表示插槽名为 header 的插槽，接收的 data，data1，data2 属性类型为 string
  header(props: { data: string; data1: string; data2: string }): any
  default(): any
  footer(): any
}>()
</script>
<template>
  <div>
    <h2>这是有位置的组件</h2>
    <div>header</div>
    <!-- 但是我这里传过去的 data2 类型是 数组 -->
    <slot name="header" :data="data" :data1="data1" :data2="data2"></slot>
    <div>default</div>
    <slot></slot>
    <div>footer</div>
    <slot name="footer"></slot>
  </div>
</template>

<style lang="less" scoped></style>

vscode 进行的提示：