Vue3 插槽-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_69012364/article/details/136616101

本文详细介绍了Vue中的三种主要插槽类型：匿名插槽、具名插槽（包括动态具名插槽）和作用域插槽。通过实例展示了它们的使用方式和区别，以及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.插槽三大类

匿名插槽
具名插槽
作用域插槽

2.对插槽的理解

1. 匿名插槽：顾名思义就是没有名字的插槽

父组件 father.vue

<template>
    <child>
        <span>
            你好Vue
        </span>
    </child>
</template>

子组件 child.vue

<template>
  <div>
    <!-- 子组件 -->
   我是父组件匿名插槽传来的得值： <slot></slot>
  </div>
</template>

2. 具名插槽: 顾名思义就是有名字的插槽

父组件 father.vue

<template>
    <child>
        <template #Vue>
            vue
        </template>
    </child>
</template>

子组件 child.vue

<template>
  <div>
    <!-- 子组件 -->
   我是父组件具名插槽传来的得值： <slot name="Vue"></slot>
  </div>
</template>

延伸：动态具名插槽

父组件 father.vue

<template>
    <child>
        <!-- 动态 -->
        <template #[temName]>
            {{ a }}
        </template>
    </child>
</template>

const temName=ref('temName')
const a=ref(20)

子组件 child.vue

<template>
  <div>
    <!-- 子组件 -->
    <p>我是父组件动态具名插槽传来的得值： <slot name="temName"></slot></p>
  </div>
</template>

3.作用域插槽：官方叫他作用域插槽。实际上，对比前面两种插槽，我们可以叫它带数据的插槽

父组件 father.vue

<template>
    <child>
        <!-- 作用域插槽 -->
        <template #data="{ data }">
            {{ data }}
        </template>
        <template #xiaozhu="{ personName, age }">
            {{ personName }}{{ age }}
        </template>
    </child>
</template>

子组件 child.vue

<template>
  <div>
     <div v-for="item in arr" :key="item.id">
    <!-- 传值给父组件 -->
      <slot :data="item" name="data"></slot>
    </div>
    <slot :personName="xiaoyue" :age="age" name="xiaozhu"></slot>
  </div>
</template>
<script lang="ts"setup>
import { ref } from "vue";
interface Person {
  id: number
  name: string
}
interface List {
  [index: number]: Person
}
let arr = ref<List>([
  {
    id: 1,
    name: '张三'
  },
  {
    id: 2,
    name: '李四'
  }
])
const age=ref('18')
const xiaoyue=ref('小猪今年')
</script>