Vue 插槽全攻略：重塑组件灵活性

前言

📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！

🍅 个人主页：南木元元****

什么是slot插槽

Vue官方文档：Vue实现了一套内容分发的 API，将**<slot>**元素作为承载分发内容的出口。

通俗来讲，就是“占坑”，使用<slot></slot>在子组件模板中占好位置，父组件就可以向其中传递一些内容。

Vue 的插槽可以分为三类：

• 默认插槽
• 具名插槽
• 作用域插槽

默认插槽

默认插槽又名匿名插槽，是最简单的插槽形式，当slot没有指定name属性值的时候为一个匿名插槽（一个组件内只有一个匿名插槽）。

示例：

// 子组件Child
<template>
  <div class="child">
    <!-- 默认插槽：这个内容会被父组件传递的内容替换 -->
    <slot></slot>
  </div>
</template>

// 父组件Parent（引用子组件Child）
<template>
  <Child>南木元元</Child>
</template>

渲染结果：

<template>
  <div class="child">
    南木元元
  </div>
</template>

子组件中使用默认插槽slot，实现了父组件向子组件的指定位置插入一段内容，即内容的分发。

编译作用域

我们可以通过slot向子组件传递父组件内任意的data值，比如：

// 父组件Parent（引用子组件Child）
<template>
  <Child>{{ msg }}</Child>
</template>

<script>
import Child from "./child.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      msg: "父组件",
    };
  },
};
</script>

但我们能否直接使用子组件内的数据呢？答案是不行的。

// 子组件Child
<template>
  <div class="child">
    <!-- 默认插槽：这个内容会被父组件传递的内容替换 -->
    <slot></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      child: "子组件",
    };
  },
};
</script>

// 父组件Parent（引用子组件Child）
<template>
  <!-- 不能访问子组件的作用域 -->
  <Child>{{ child }}</Child>
</template>

因为有一条规则：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容

后备内容，就是slot的默认值，有时我们没有在父组件中提供内容，那么slot就会显示默认值，如：

// 子组件Child
<template>
  <div class="child">
    <!-- 父组件没有提供内容时显示后备内容 -->
    <slot>这是插槽的后备内容</slot>
  </div>
</template>

// 父组件Parent（引用子组件Child）
<template>
  <!-- 父组件没有向插槽提供内容 -->
  <Child></Child>
</template>

渲染结果：

具名插槽

具名插槽是指带有name属性的slot，一个组件可以出现多个具名插槽。

有时需要多个插槽，我们就可以使用具名插槽，根据名称将不同内容精确分发到不同位置。

示例：

子组件

// 子组件Child
<template>
  <div class="child">
    <!-- 具名插槽：带name的slot -->
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件中，需要在一个 <template> 元素上使用 v-slot:name 或 #name（v-slot:name的缩写，2.6.0 新增）的形式向具名插槽提供内容。

// 父组件Parent（引用子组件Child）
<template>
  <Child>
    <!-- 具名插槽header -->
    <template v-slot:header>
      <h1>头部标题区</h1>
    </template>

    <!-- 这是默认插槽 -->
    <p>主要内容区</p>
    
    <!-- 具名插槽footer，使用缩写形式 -->
    <template #footer>
      <p>底部区域</p>
    </template>
  </Child>
</template>

渲染结果：

注意：上面示例中，<template>元素中的所有内容都将会被传入相应的插槽，而没有被包裹在带有v-slot的<template>中的内容都会被视为默认插槽的内容。

<p>主要内容区</p>
// 上面等价于下面这种写法
<template v-slot:default>
  <p>主要内容区</p>
</template>

作用域插槽

前面我们说过，父组件中不能直接使用子组件内的数据。如果父组件要使用子组件中的数据，我们可以使用作用域插槽。该插槽可以将子组件数据传给父组件，让父组件根据子组件的传递过来的数据决定如何渲染内容。

// 子组件Child
<template>
  <div class="child">
    <header>
      <!-- 向具名插槽中传入子组件的数据 -->
      <slot name="header" :message1="child1"></slot>
    </header>
    <main>
      <!-- 传入子组件的数据，这里没有命名slot -->
      <slot :message2="child2"></slot>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      child1: "消息1",
      child2: "消息2",
    };
  },
};
</script>

// 父组件Parent（引用子组件Child）
<template>
  <Child>
    <!-- 通过v-slot的语法，将子组件的message1值赋值给headerProps -->
    <template v-slot:header="headerProps">
      {{ headerProps }}
      <br />
      {{ headerProps.message1 }}
    </template>

    <!-- 由于子组件没有给slot命名，默认值就为default -->
    <template v-slot:default="defaultProps">
      {{ defaultProps.message2 }}
    </template>
  </Child>
</template>

渲染结果：

应用场景

作用域插槽在组件封装时非常有用，它能够在保持组件逻辑封装的同时，还能允许父组件根据子组件的数据进行自定义渲染，从而在增强组件复用性和灵活性的同时保持良好的封装性。

我们来看个案例：下面封装了一个列表组件，主要负责渲染展示一个列表，数据由父组件传递。

// 子组件Child
<template>
  <div class="child">
    <h3>{{ title }}</h3>
    <p v-for="item in list" :key="item.id">{{ item.id }}.{{ item.text }}</p>
  </div>
</template>
<script>
export default {
  name: "Child",
  props: ["title", "list"],
};
</script>

// 父组件Parent（引用子组件Child）
<template>
  <Child :list="list" :title="title"> </Child>
</template>

<script>
import Child from "./child.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      title: "名人名言",
      list: [
        {
          id: 1,
          text: "成功就是从失败到失败，也依然不改热情。",
        },
        {
          id: 2,
          text: "成为你自己想要看到的改变。",
        },
        {
          id: 3,
          text: "努力并不会背叛你，哪怕一时看不到回报。",
        },
      ],
    };
  },
};
</script>

效果：

但存在一些问题，当有些页面需要复用该组件展示列表时，比如，需要在title处增加一个图标，或者在展示内容时不显示编号1、2、3，就不够灵活。

这时，我们就可以通过作用域插槽，将列表元素内容和样式的控制权交给使用它的父组件来控制。

复用该组件时在title处添加图标：

// 子组件Child
<template>
  <div class="child">
    <h3>
      <!-- 通过插槽将title传给父组件 -->
      <slot name="title" v-bind:titleValue="title"> {{ title }} </slot>
    </h3>
    <p v-for="item in list" :key="item.id">
      <!-- 通过插槽将列表元素传给父组件 -->
      <slot name="text" v-bind:itemValue="item"
        >{{ item.id }}.{{ item.text }}
      </slot>
    </p>
  </div>
</template>
<script>
export default {
  name: "Child",
  props: ["title", "list"],
};
</script>
<style scoped></style>

// 父组件Parent控制标题的显示（引用子组件Child）
<template>
  <Child :list="list" :title="title">
    <template v-slot:title="slotTitle">
      <!-- title处添加图标 -->
      <a-icon type="smile" />{{ slotTitle.titleValue }}
    </template>
  </Child>
</template>

效果：

展示内容时不显示编号1、2、3：

// 父组件Parent控制列表元素的显示（引用子组件Child）
<template>
  <Child :list="list" :title="title">
    <template v-slot:text="slotItem">
      {{ slotItem.itemValue.text }}
    </template>
  </Child>
</template>

效果：

通过作用域插槽，父组件完全控制了如何展示列表项，而不需要修改子组件的内部逻辑。

动态插槽名

2.6.0 新增：动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<Child>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</Child>

这里方括号中的dynamicSlotName会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。

废弃的插槽语法

以上的插槽语法是Vue 2.6.0后的语法，在这之前，插槽语法为slot（默认插槽或具名插槽）和slot-scope（作用域插槽）。

vue官网：v-slot指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。

默认插槽

父组件省略不写或者在template上使用slot属性：slot="default"，将内容从父级传给默认插槽。

// 子组件Child
<template>
  <div class="child">
    <!-- 默认插槽：这个内容会被父组件传递的内容替换 -->
    <slot></slot>
  </div>
</template>

// 父组件Parent（引用子组件Child）
<template>
  <Child>
    <template slot="default"> 南木元元 </template>
  </Child>
</template>

具名插槽

父组件在template上使用slot属性：slot="name"，将内容从父级传给具名插槽。

// 子组件Child
<template>
  <div class="child">
    <!-- 具名插槽：带name的slot -->
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

// 父组件Parent（引用子组件Child）
<template>
  <Child>
    <!-- 具名插槽header -->
    <template slot="header">
      <h1>头部标题区</h1>
    </template>

    <!-- 这是默认插槽 -->
    <p>主要内容区</p>

    <!-- 具名插槽footer -->
    <template slot="footer">
      <p>底部区域</p>
    </template>
  </Child>
</template>

作用域插槽

父组件在template上使用slot-scope属性，可以接收传递给插槽的 prop。

// 子组件Child
<template>
  <div class="child">
    <header>
      <!-- 向具名插槽中传入子组件的数据 -->
      <slot name="header" :message1="child1"></slot>
    </header>
    <main>
      <!-- 传入子组件的数据，这里没有命名slot -->
      <slot :message2="child2"></slot>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      child1: "消息1",
      child2: "消息2",
    };
  },
};
</script>

// 父组件Parent（引用子组件Child）
<template>
  <Child>
    <!-- 通过slot-scope的语法，将子组件的message1值赋值给headerProps -->
    <template slot="header" slot-scope="headerProps">
      {{ headerProps.message1 }}
    </template>

    <!-- 由于子组件没有给slot命名，这里的slot="default"可以忽略为隐性写法 -->
    <template slot-scope="defaultProps">
      {{ defaultProps.message2 }}
    </template>
  </Child>
</template>

效果：

slot-scope 属性也可以直接用于非 <template> 元素 （包括组件）。

<template>
  <Child>
    <!-- slot-scope attribute 也可以直接用于非 <template> 元素 -->
    <span slot-scope="defaultProps">
      {{ defaultProps.message2 }}
    </span>
  </Child>
</template>

slot-scope的值可以接收任何有效的可以出现在函数定义的参数位置上的 JavaScript 表达式，即可以在表达式中使用es6解构，这样写法就更加简洁了。

<template>
  <Child>
    <!-- 使用es6解构 -->
    <span slot-scope="{ message2 }">
      {{ message2 }}
    </span>
  </Child>
</template>

总结

最后我们来做一个小小的总结：

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~