Vue3中插槽(slot)的全部使用方法

更新时间：2022年08月23日 08:30:17 作者：东方小月

这篇文章主要介绍了Vue3中插槽(slot)的全部使用方法，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下

什么是插槽

简单来说就是子组件中的提供给父组件使用的一个坑位，用<slot></slot> 表示，父组件可以在这个坑位中填充任何模板代码。

比如一个最简单插槽例子：

//父组件
<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>

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

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

//父组件
<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变量。所以子组件 插槽是可以访问到父组件的数据作用域，而插槽内容是无法访问子组件的数据（即父组件中两个<Child>之间是不能使用子组件中的数据的），这就是所谓的渲染作用域。后面会介绍插槽向插槽内容传参的方式

默认内容

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

//子组件
<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展示提供的内容

具名插槽

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

//子组件

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot name="bigTurnip"></slot>
        </div>
        <!-- 小萝卜 -->
        <div>
            <slot name="smallTurnip"></slot>
        </div>
        <!-- 中萝卜 -->
        <div>
            <slot name="midTurnip"></slot>
        </div>
    </div>
</template>

//父组件

<template>
  <div>
    <Child>
      <!-- #smallTurnip 为v-slot:smallTurnip缩写 -->
      <template #smallTurnip>
        小萝卜
      </template>
      <template #midTurnip>
        中萝卜
      </template>
      <template #bigTurnip>
        大萝卜
      </template>
    </Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

所以父组件中无需在意顺序，只需要写好模板命好名，它就会自动去到它所对应的位置。

动态插槽名

动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。

//父组件
<template>
  <div>
    <Child>
      <!-- 等同于#smallTurnip -->
      <template #[slotName]>
        小萝卜
      </template>
      <template #midTurnip>
        中萝卜
      </template>
      <template #bigTurnip>
        大萝卜
      </template>
    </Child>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const slotName = ref('smallTurnip')
</script>

作用域插槽

上面说过插槽内容是无法访问子组件的数据的，但是如果我们想在插槽内容访问子组件的状态该怎么办呢？

其实插槽可以像对组件传递 props 那样，在slot标签绑定属性从而传递给父组件中的插槽内容。首先来看下默认插槽的传值方式

//子组件
<template>
    <div>
        <slot personName="xiaoyue" age="18"></slot>
    </div>
</template>

//父组件

<template>
  <div>
    <Child v-slot="slotProps">
      My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year
    </Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

你还可以以结构的形式获取slot提供的数据

<template>
  <div>
    <Child v-slot="{ personName, age }">
      My name is {{ personName }} and I am {{ age }} years old this year
    </Child>
  </div>
</template>

注意不能绑定name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样

//父组件
<template>
  <div>
    <Child>
      <template #bigTurnip="bigTurnipProps">
        {{ bigTurnipProps.message }}
      </template>
    </Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot name="bigTurnip" message="我是萝北"></slot>
        </div>
    </div>
</template>

这类插槽便是具名作用域插槽啦

写在最后

到此这篇关于Vue3中插槽(slot)的全部使用方法的文章就介绍到这了,更多相关Vue3插槽slot内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue使用v-if v-show页面闪烁,div闪现的解决方法
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧
2018-10-10
Vue 使用Props属性实现父子组件的动态传值详解
今天小编就为大家分享一篇Vue 使用Props属性实现父子组件的动态传值详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue实现在线预览pdf文件和下载（pdf.js）
这篇文章主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
关于vue的列表图片选中打钩操作
这篇文章主要介绍了关于vue的列表图片选中打钩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
element-plus报错ResizeObserver loop limit exceeded解决办法
这篇文章主要给大家介绍了关于element-plus报错ResizeObserver loop limit exceeded的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
用vue设计一个数据采集器
这篇文章主要介绍了如何用vue设计一个数据采集器，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-04-04
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
这篇文章主要介绍了vue自定义键盘信息、监听数据变化的方法,结合实例形式分析了vue.js基于vm.$watch进行事件监听相关操作技巧,需要的朋友可以参考下
2019-03-03
基于Vue2实现歌曲播放和歌词滚动效果
这篇文章主要介绍了如何基于Vue2实现歌曲播放和歌词滚动效果,文中通过代码示例和图文讲解的非常详细,对大家的学习或工作有一定的帮助,感兴趣的小伙伴可以自己动手试一下
2024-09-09
Vue中父子组件通信与事件触发的深入讲解
组件是Vue核心功能之一,合理的组件化,可以减少我们代码的冗余,提高项目的可维护性,下面这篇文章主要给大家介绍了关于Vue中父子组件通信与事件触发的相关资料,需要的朋友可以参考下
2022-03-03
vue项目中使用vue-layer弹框插件的方法
这篇文章主要介绍了vue项目中使用vue-layer弹框插件的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03