从新手到专家：Vue插槽带你玩转内容分发

正在努力的前端小白
210 阅读4分钟

引言

想象一下这样一个场景：你正在为一个电商平台开发用户评价组件。这个组件不仅需要展示用户的评分和评论，还可能需要根据不同的页面或上下文环境展示额外的信息，比如推荐商品、用户头像或是分享按钮。如果每次因为展示内容的不同而创建一个新的组件，这无疑会增加开发成本，并且让代码库变得臃肿难管。

这时，Vue的插槽机制就派上用场了。通过使用插槽，你可以轻松地在一个基础组件内定义多个可替换的内容区域，然后在父组件中根据具体的需求填充这些区域。这样一来，同一个组件就能适应各种不同的展示需求，既保持了代码的一致性，又提高了灵活性。

什么是插槽？

在Vue.js中，插槽（Slots）是一种强大的机制，用于在组件内部定义可替换的内容区域。通过插槽，父组件可以向子组件传递内容，从而实现高度定制化的组件设计。简而言之，插槽允许你在一个基础组件中定义一个或多个“占位符”，然后在使用该组件时根据需要填充这些占位符。

插槽的分类

Vue 3提供了几种不同类型的插槽，每种都有其特定的用途和优势。了解这些分类有助于更高效地利用插槽功能，满足各种复杂的UI需求。

1. 默认插槽

默认插槽是最简单的插槽形式，适用于当只有一个插入点时的情况。它不需要指定名称，默认情况下所有未命名的内容都会被放置在这个位置。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child">
    <slot>这里是默认内容</slot>
  </div>
</template>

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent>
    这里是父组件提供的内容
  </ChildComponent>
</template>
2. 具名插槽

当你需要在同一个组件中有多个不同的插入点时，可以使用具名插槽。每个具名插槽都有一个唯一的名称，父组件可以通过v-slot指令（或其缩写#）来指定要插入的内容。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child">
    <header>
      <slot name="header">这里是头部默认内容</slot>
    </header>
    <main>
      <slot>这里是主体默认内容</slot>
    </main>
    <footer>
      <slot name="footer">这里是尾部默认内容</slot>
    </footer>
  </div>
</template>

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:header>
      这里是自定义头部内容
    </template>
    <template #default>
      这里是自定义主体内容
    </template>
    <template v-slot:footer>
      这里是自定义尾部内容
    </template>
  </ChildComponent>
</template>

注意：在Vue 3中，v-slot指令只能用在 <template> 标签上，除非是作用域插槽。

3. 作用域插槽

有时，父组件需要访问子组件的数据或方法，这时可以使用作用域插槽。通过作用域插槽，子组件可以向父组件传递数据，使父组件能够基于这些数据动态生成内容。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child">
    <slot :user="user"></slot>
  </div>
</template>
<script setup>
import { reactive } from 'vue';

const user = reactive({
  name: 'John Doe',
  age: 30
});
</script>

<!-- 使用对象解构---父组件 ParentComponent.vue -->
<template>
  <ChildComponent v-slot="{ user }">
    {{ user.name }} - {{ user.age }}
  </ChildComponent>
</template>

<!-- 使用对象解构：取别名---父组件 ParentComponent.vue  -->
<template>
  <ChildComponent v-slot="{ user:person }">
    {{ person.name }} - {{ person.age }}
  </ChildComponent>
</template>

<!-- 不使用使用对象解构---父组件 ParentComponent.vue  -->
<template>
   <ChildComponent v-slot:default="slotProps">
    {{ slotProps.user.name }} - {{ slotProps.user.age }}
  </ChildComponent>
</template>

在Vue 3中，作用域插槽的语法变得更加简洁。你可以直接解构插槽属性，并且不需要再使用slot-scope，而是使用v-slot或其缩写#。

4. 动态插槽名

可以通过变量来动态决定插槽的名字。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child">
    <slot name="dynamicSlotName">这里是默认内容</slot>
  </div>
</template>

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent>
    <template #[dynamicSlotName]>
      这里是动态插槽的内容
    </template>
  </ChildComponent>
</template>
<script setup>
import { ref } from 'vue';

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

Vue在线编码平台推荐：Vue Playground

本文涉及的所有代码都可以在 Vue Playground (play.vuejs.org/) 上运行和测试。这是一个非常好用的Vue在线编码平台，推荐大家收藏使用！大家也可以使用这个去试着实现一下引言当中的内容.如果觉得这个网站有用的话给孩子一个点赞吧。

以下是我觉得特别实用的几个功能：

  1. 无需本地环境，打开即用
  2. 支持实时预览，所见即所得
  3. 代码支持一键分享，方便与他人交流
  4. 内置Vue 3全家桶，包含最新特性
  5. 界面简洁清晰，上手容易
avatar
文章
阅读
粉丝