Vue.js 中的插槽（Slot）：灵活定制组件内容

Vue.js 中的插槽（Slot）：灵活定制组件内容

在 Vue.js 的开发中，组件化是构建复杂应用的核心思想。但有时候，我们可能会遇到一个棘手的问题：如何让一个组件在不同场景下展示不同的内容？比如，一个通用的“分类展示”组件，可能需要展示游戏列表、美食图片或者影视推荐。如果为每种内容都单独写一个组件，不仅代码冗余，还增加了维护成本。这时候，Vue.js 的插槽（Slot）功能就派上用场了。

插槽的三种类型

Vue.js 中的插槽主要分为三种：

1. 默认插槽（Default Slot）：最简单的一种，允许你在子组件中定义一个“填空区”，父组件可以在那里插入任意内容。

2. 具名插槽（Named Slot）：通过名字区分，可以在子组件中定义多个“填空区”，父组件可以根据名字插入不同的内容。

3. 作用域插槽（Scoped Slot）：允许父组件访问子组件的数据，从而实现更复杂的交互。

今天，我们先从最简单的默认插槽开始讲起。

默认插槽：简单却强大的“填空区”

默认插槽就像是在子组件中挖了一个坑，等着父组件来填。这个“坑”可以用 <slot> 标签表示。如果父组件没有填内容，你还可以给它一个默认值，就像给坑里先放点土一样。

场景：动态内容展示

假设我们要做一个分类展示组件，用来展示不同类型的内容，比如游戏列表、美食图片或者影视推荐。这些内容的结构很相似，但具体内容却各不相同。如果为每种内容都单独写一个组件，代码会很冗余。这时候，我们可以用默认插槽来实现一个通用的分类组件。

实现步骤

1. 创建分类组件（Category.vue）

   这个组件就是一个简单的“坑”，等着父组件来填内容。

<template>
  <div class="category">
    <h2>{{ title }}</h2>
    <slot>默认内容</slot>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  }
};
</script>

<style scoped>
.category {
  background-color: lightblue;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 200px;
  height: 300px;
}
</style>

1. 在父组件中使用分类组件

   父组件可以根据需要，往这个“坑”里填不同的内容。

<template>
  <div class="content">
    <Category title="热门游戏列表">
      <ul>
        <li v-for="game in games" :key="game.id">{{ game.name }}</li>
      </ul>
    </Category>

    <Category title="今日美食城市">
      <img :src="imageUrl" alt="美食图片" />
    </Category>

    <Category title="今日影视推荐">
      <video :src="videoUrl" controls></video>
    </Category>
  </div>
</template>

<script>
import { ref } from 'vue';
import Category from './Category.vue';

export default {
  components: { Category },
  setup() {
    const games = ref([
      { id: 1, name: '英雄联盟' },
      { id: 2, name: '王者荣耀' },
      { id: 3, name: '红色警戒' },
      { id: 4, name: '斗罗大陆' }
    ]);

    const imageUrl = ref('https://example.com/path/to/image.jpg');
    const videoUrl = ref('https://example.com/path/to/video.mp4');

    return { games, imageUrl, videoUrl };
  }
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-around;
}
</style>

标签里夹的内容放在slot槽之中

效果展示

通过这种方式，我们实现了一个通用的分类组件，父组件可以根据需要传递不同的内容（比如列表、图片或视频）到子组件中。这种设计不仅减少了代码冗余，还提高了组件的复用性。

默认插槽的优势

1. 灵活性高：父组件可以根据需要传递任意内容到子组件，而无需修改子组件的内部结构。

2. 代码复用性：通过定义通用的组件结构，减少重复代码，提高开发效率。

3. 响应式支持：通过 Vue 的响应式系统，可以轻松实现数据的动态更新。

具名插槽：为组件“挖更多坑”

有时候，一个坑不够用啊！比如，你有个组件结构，里边有好几个地方需要填不同的内容，这时候就得用到“具名插槽”了

具名插槽，顾名思义，就是给每个坑起个名字，这样父组件就能精准地把内容填到指定的位置。比如，你有个分类展示组件，里边有标题区、内容区，甚至还有个广告区，这时候就可以用具名插槽来区分。

子类中通过默认标题来定义个名字，父类中通过

<template v-slot:header>
      <h2>热门游戏列表</h2>
    </template>

来一一对应具体的卡槽，Vue 提供了简写方式，可以用 # 替代 v-slot:。比如 v-slot:header 可以简写为 #header具名插槽比默认插槽更灵活，因为它允许你在组件里定义多个坑，并且可以精准地填内容。

注意事项

1. 单标签与双标签的区别：Vue 支持单标签和双标签的组件写法。如果使用双标签，Vue 会将标签之间的内容视为插槽内容。

2. 默认内容的使用：在 <slot> 标签中可以定义默认内容，当父组件未传递内容时，将显示默认内容。

3. 样式隔离：通过 scoped 样式，可以确保子组件的样式不会影响父组件，反之亦然。

总结

Vue.js 中的默认插槽就像是在组件中挖了一个坑，等着父组件来填内容。这种简单的机制，却能实现非常灵活的组件设计。