Vue3中插槽(slot)用法汇总(推荐)

更新时间：2022年08月23日 11:25:44 作者：迪迪滴

这篇文章主要介绍了Vue3中插槽(slot)用法汇总,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

什么是插槽

简单来说就是子组件中的提供给父组件使用的一个 坑位 ，用 <slot></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>

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

写在最后

到这里 插槽 (slot)的全部用法基本就已经介绍完啦。

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

您可能感兴趣的文章:

十分钟封装一个好用的axios步骤示例
这篇文章主要为大家介绍了十分钟封装一个好用的axios步骤示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
ant desing vue table 实现可伸缩列的完整例子
最近在使用ant-design-vue做表格时，遇到要做一个可伸缩列表格的需求，在网上一直没有找到好的方法，于是小编动手自己写个可以此功能，下面小编把ant desing vue table 可伸缩列的实现代码分享到脚本之家平台供大家参考
2021-05-05
vue v-model的详细讲解(推荐!)
vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别,下面这篇文章主要给大家介绍了关于vue v-model的相关资料,需要的朋友可以参考下
2022-04-04
基于vue,vue-router, vuex及addRoutes进行权限控制问题
这篇文章主要介绍了基于vue，vue-router, vuex及addRoutes进行权限控制问题,需要的朋友可以参考下
2018-05-05
vue中keep-alive组件使用和一些基础配置方法
本文主要介绍了Vue中keep-alive组件的使用方法和一些基础配置,keep-alive是Vue中的一个抽象组件,可以缓存组件实例,提高性能,本文给大家介绍vue中keep-alive组件使用和一些基础配置方法,感兴趣的朋友一起看看吧
2024-10-10
解决Vue动态加载本地图片问题
这篇文章主要介绍了Vue如何动态加载本地图片的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
如何基于Vue制作一个猜拳小游戏
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式,下面这篇文章主要给大家介绍了关于如何基于Vue制作一个猜拳小游戏的相关资料,需要的朋友可以参考下
2023-01-01
vue3安装配置sass的详细步骤
sass是css的预处理器,扩展了css语言,提供了规则、变量、混入、选择器、继承、内置函数等特性,有助于减少CSS重复的代码,节省开发时间,下面这篇文章主要给大家介绍了关于vue3安装配置sass的相关资料,需要的朋友可以参考下
2022-12-12
webpack安装配置与常见使用过程详解（结合vue）
这篇文章主要介绍了webpack安装配置与常见使用过程，主要结合vue实现，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
vue中的watch监听数据变化及watch中各属性的详解
这篇文章主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-09-09