前言

【释义】插槽通俗讲就是：子组件预留一个坑位，父组件后期来填坑。插槽允许你在父组件中传递内容到子组件中的特定位置，这样你可以在子组件中定义一些可定制的区域。在Vue 3中，插槽有两种类型：默认插槽和具名插槽。

Vue组件化中，当我们在设计一个组件的时候，可能会保留一部分，供开发者使得自定义的内容，比如：

通用的弹出框、模态框、对话框等组件；
布局控制：插槽使布局更加灵活。你可以将插槽放置在组件的不同位置，以控制组件的布局结构和外观。
列表渲染：当你需要在列表中渲染不同的组件或元素时，插槽可以派上用场。它允许你在父组件中定义一个模板，然后在每个列表项中填充不同的内容。

总的来说，Vue 3 的插槽功能在许多业务场景中都能发挥重要作用，帮助你构建灵活、可复用和易于维护的组件和页面。

插槽类型

匿名插槽

匿名插槽是 Vue 中一种特殊类型的插槽，它允许父组件在子组件中插入任意的内容，并且这些内容不需要在父组件中进行具名定义。通俗来说，匿名插槽就像是一个容器，你可以在父组件中向子组件传递任意的内容，而子组件可以自由地在特定位置显示这些内容。匿名插槽是一种特殊的具名插槽，也就是名为default的插槽

示例

mouse.vue

Vue 复制代码

<template>
    <div>
        <div class="text-base">下方是匿名插槽 也就是说#default</div>
        <slot></slot>
    </div>
</template>

<script setup lang="ts"></script>

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

index.vue

Vue 复制代码

<template>
<div class="text-center">
    <mouseslot>
        <template #default> 默认插槽放置数据</template>
    </mouseslot>
</div>
</template>

<script setup lang="ts">
import mouseslot from "@/components/slots/mouse.vue";
</script>

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

渲染出的：

具名插槽

具名插槽是 Vue.js 中一种功能强大的特性，它允许你在父组件中为子组件的插槽指定名称，并在子组件中使用这些名称来放置内容。这种方式让你可以更精细地控制组件之间的交互和布局。

具名插槽的使用场景包括但不限于：

多个插槽的情况： 当一个组件有多个插槽时，使用具名插槽可以让你更清晰地区分它们，并在父组件中指定要插入的内容。
动态布局： 具名插槽使得在父组件中动态地选择要放置的内容成为可能。这在需要根据条件动态显示内容的场景中非常有用。
组件复用： 具名插槽使得组件更具灵活性和可复用性。通过在子组件中定义具名插槽，父组件可以根据需要灵活地传递不同的内容。

示例

mouse.vue

vue 复制代码

<div>
    <!-- 默认插槽，命名为 "default" -->
    <slot name="default"></slot>

    <!-- 具名插槽，命名为 "slotOne" -->
    <slot name="slotOne">我是具名插槽slotOne </slot>

    <!-- 具名插槽，命名为 "slotTwo" -->
    <slot name="slotTwo">我是具名插槽slotTwo </slot>
</div>

index.vue

vue 复制代码

<div class="text-center">
    <mouseslot>
        <template #default>
                <p>默认插槽放置数据0</p>
        </template>

        <template #slotOne>
                <p>默认插槽放置数据1</p>
        </template>

        <template #slotTwo></template>
    </mouseslot>
</div>

动态插槽名

在 Vue.js 中，插槽名也可以是动态的，这使得你可以根据组件的状态或属性来动态地选择要使用的插槽。

vue 复制代码

<template>
    <div>
      <!-- 使用具名插槽，并根据 dynamicSlotName 动态选择插槽 -->
      <child-component :dynamicSlotName="slotName">
            <template v-if="slotName === 'header'" #header>
              <h2>这是动态头部内容</h2>
            </template>
            <template v-else-if="slotName === 'footer'" #footer>
              <p>这是动态底部内容</p>
            </template>
            <template v-else>
              <p>这是默认内容</p>
            </template>
      </child-component>
    </div>
</template>

<script lang="ts" setup>
import ChildComponent from './ChildComponent.vue';
const slotName = ref("header")
</script>

作用域插槽

作用域插槽（Scoped Slots）是 Vue.js 中的一个特性，它允许子组件在插槽中访问父组件的数据，从而在子组件中对数据进行处理和渲染。作用域插槽使得父组件可以向子组件传递更复杂的数据结构，并且让子组件可以更灵活地处理这些数据。

具体来说，作用域插槽的原理是，父组件可以在子组件中定义一个带有参数的插槽，并将数据作为参数传递给插槽。子组件在接收到数据后，可以在插槽中使用这些数据，并根据需要进行处理和渲染。

vue 复制代码

<!-- 

<template v-slot:slotThree="ceshi">
        <p>{{ ceshi.age }}</p>
</template> 

-->

<!-- 解构的方式 -->
<template v-slot:slotThree="{ personalName }">
        <p>{{ personalName }}</p>
</template>


<!-- 作用域插槽  -->
<slot name="slotThree" :message="props.customMessage" personalName="Anthony" age=22></slot>

最后

如果觉得文章可以，希望点个「点赞」，心情豁然开朗，工作如鱼得水。更多的知识总结和日常分享在公众号里分享啦【小李的李li】

关于企业官网当中的组件化插槽实例的使用<v-slot>

前言

插槽类型

匿名插槽

示例

具名插槽

示例

动态插槽名

作用域插槽

最后