Vue3插槽

whhhhhhhhhw

于 2025-07-05 02:31:47 发布

阅读量1.2k

点赞数 29

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/whhhhhhhhhw/article/details/149127802

前言：

Vue3 的插槽（Slots）是组件化开发中的重要特性，它允许开发者灵活地组合和分发内容，实现更高效的组件复用和定制。插槽机制为父子组件之间的内容传递提供了强大的支持，无论是默认插槽、具名插槽还是作用域插槽，都能满足多样化的开发需求。

随着 Vue3 的推出，插槽功能得到了进一步优化，性能更高效，逻辑更清晰。本文将从基础概念出发，逐步解析 Vue3 插槽的使用方式、常见场景以及高级技巧，帮助开发者更好地理解和运用这一核心功能。无论是构建动态布局、设计可复用的 UI 组件，还是实现复杂的交互逻辑，插槽都能成为开发中的得力工具。

1.默认插槽

默认插槽是 Vue3 中最基础的插槽类型，用于接收父组件传递的匿名内容。当子组件未定义具名插槽时，所有内容都会渲染到默认插槽的位置。

子组件定义：

在子组件中，使用<slot>标签作为占位符，标记父组件内容插入的位置。若父组件未提供内容，可设置默认内容作。

<!-- ChildComponent.vue -->
<template>
    <div>
        <header>
            <slot>默认内容（当父组件未传递时显示）</slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot></slot>
        </footer>
    </div>
</template>

父组件使用：

<template>
  <div class="app">
    <ChildComponent>
      <p>这是父组件传递给默认插槽的内容</p>
    </ChildComponent>
  </div>
</template>

<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>

标准写法：

<template>
  <div class="app">
    <ChildComponent>
      <!-- 默认插槽 -->
      <template #default>
        <p>这是父组件传递给默认插槽的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

#号表示v-slot的缩写，default表示默认插槽。

打开页面可以看到所有slot标签中的内容全部被父组件中的内容插入替代了，当我们想要分类来插入时就用到了具名插槽。

2.具名插槽

其实就是给子组件中的slot标签其一个名字，然后在父组件中根据其的名称，将内容插入到对的插槽中。

子组件定义：

<!-- ChildComponent.vue -->
<template>
    <div>
        <header>
            <slot>默认内容（当父组件未传递时显示）</slot>
        </header>
        <main>
            <slot name="main"></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

父组件使用：

<template>
  <div class="app">
    <ChildComponent>
      <!-- 默认插槽 -->
      <template #default>
        <p>这是父组件传递给默认插槽的内容</p>
      </template>

      <!-- 具名插槽 -->
       <template #main>
        <p>这是给main插入的内容</p>
       </template>
       <template #footer>
        <p>这是给footer插入的内容</p>
       </template>
    </ChildComponent>
  </div>
</template>

<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>

页面效果：

注意事项：

组件中最多只能存在一个默认插槽
未命名的<slot>自动成为默认插槽
名插槽内容必须用<template>包裹
插槽名称需保持唯一性

3.动态插槽

动态插槽允许在父组件中通过变量动态指定插槽名称，实现更灵活的组件内容分发。这种模式适用于需要根据运行时条件切换不同插槽内容的场景。

子组件定义：

<!-- ChildComponent.vue -->
<template>
    <div>
        <header>
            <slot name="header">默认内容（当父组件未传递时显示）</slot>
        </header>
        <main>
            <slot name="main"></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

子组件需预定义多个具名插槽，供父组件动态选择。

父组件动态绑定：

<template>
  <div class="app">
    <ChildComponent>
      <template #[dynamicSlotName]>
        <p>这是父组件传递给{{ dynamicSlotName }}的内容</p>
      </template>
      <template #main>
        <p>这是给main插入的内容</p>
      </template>
      <template #footer>
        <p>这是给footer插入的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './components/ChildComponent.vue';

const dynamicSlotName = ref('header')
</script>

当需要批量控制多个动态插槽时，可以使用v-for循环。代码如下：

<template>
  <div class="app">
    <ChildComponent>
      <template v-for="(value, name) in slotMap" :key="name" #[name]>
        <p>这是给{{ name }}插入的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './components/ChildComponent.vue';

const slotMap = ref({
  header: '头部内容',
  main: '主体内容',
  footer: '尾部内容'
})

</script>

4.作用域插槽

作用域插槽是Vue.js中一种特殊的插槽机制，允许子组件将数据传递到父组件中定义的插槽内容。与普通插槽不同，作用域插槽可以访问子组件内部的数据，从而实现更灵活的模板定制。

作用域插槽的基本语法：

在子组件中，通过slot标签绑定需要传递的数据，以默认插槽为例：

子组件：

<!-- ChildComponent.vue -->
<template>
    <div>
        <header>
            <slot :data="childData"></slot>
        </header>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const childData = ref('我是ChildComponent.vue中的内容')
</script>

父组件：

<template>
  <div class="app">
    <ChildComponent>
      <template #default="slotProps">
        <p>{{ slotProps.data  }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>

或者使用解构赋值的方式：

<template>
  <div class="app">
    <ChildComponent>
      <template #default="{ data }">
        <p>{{ data }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>

具名插槽同理。