插槽(slot)用法汇总-526互联

什么是插槽

简单来说就是子组件中的提供给父组件使用的一个坑位，用表示，父组件可以在这个坑位中填充任何模板代码然后子组件中就会被替换成这些内容。比如一个最简单插槽例子

<!-- 父组件 -->
<template>
  <div>
    <Child>Hello Juejin</Child>
  </div>
</template>
<script setup lang="ts">
import Child from "./Child.vue";
</script>

<!-- 子组件Child -->
<template>
  <div>
    <p>1</p>
    <slot />
    <p>2</p>
  </div>
</template>

子组件中的便是父组件放在子组件标签之间的内容。当然这之间可以传入任何代码片段，都会被放到这个位置。

1
Hello Juejin
2

同样的也可以在标签之间放入变量，比如

<!-- 父组件 -->
<template>
  <div>
    <Child>{{ msg }}</Child>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
const msg = ref("Hello Juejin");
</script>

先解释一下后面频繁出现的两个词插槽和插槽内容，防止后面阅读搞混了：

同样的插槽表示的就是这个 msg 变量。所以子组件插槽是可以访问到父组件的数据作用域，而插槽内容是无法访问子组件的数据（即父组件中两个之间是不能使用子组件中的数据的），这就是所谓的渲染作用域。后面会介绍插槽向插槽内容传参的方式

默认内容

在父组件没有提供任何插槽内容的时候，是可以为子组件的插槽指定默认内容的，比如

<!-- 子组件 -->
<template>
  <div>
    <slot>是默认内容</slot>
  </div>
</template>

<!-- 父组件1 -->
<template>
  <div>
    <Child></Child>
  </div>
</template>
<script setup>
import Child from "./Child.vue";
</script>

<!-- 父组件2 -->
<template>
  <div>
    <Child>Hello Juejin</Child>
  </div>
</template>
<script setup>
import Child from "./Child.vue";
</script>

此时父组件 1 展示默认内容

是默认内容

此时父组件 2 展示默认内容

Hello Juejin

具名插槽

很多时候一个插槽满足不了需求，需要多个插槽。于是就有了具名插槽，就是具有名字的插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑，让它们呆在该呆的位置去。比如带 name 的插槽被称为具名插槽。没有提供 name 的会隐式地命名为“default”。在父组件中可以使用 v-slot:xxx（可简写为#xxx）指令的