扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue3中插槽(slot)用法汇总(推荐)
  • 902

0
分享到

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

2024-04-02 19:04:59 902人浏览 独家记忆
摘要

目录什么是插槽默认内容具名插槽动态插槽名作用域插槽作用域插槽具名作用域插槽写在最后Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是你是否了解它全部用法呢？本篇文章就为大家

Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是你是否了解它全部用法呢？本篇文章就为大家带来vue3中插槽的全部用法来帮助大家查漏补缺。

什么是插槽

简单来说就是子组件中的提供给父组件使用的一个 坑位 ，用 <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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vue3中插槽(slot)用法汇总(推荐)

本文链接: https://lsjlt.com/news/165756.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue3中插槽(slot)用法汇总(推荐)
    目录什么是插槽默认内容具名插槽动态插槽名作用域插槽作用域插槽具名作用域插槽写在最后Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是你是否了解它全部用法呢？本篇文章就为大家...
    99+
    2024-04-02
  • Vue3插槽使用汇总
    目录一、v-slot 介绍 二、匿名插槽 三、具名插槽 四、作用域插槽 五、动态插槽名 一、v-slot 介绍 v-slot 只能用在 template 或组件上使用，否则就会报错...
    99+
    2024-04-02
  • Vue3中slot插槽基本使用
    目录1.插槽基本使用2.插槽默认内容3.具名插槽3.1 基本使用3.2 简写3.3 默认插槽与具名插槽混用4.动态插槽名5.插槽作用域问题6.作用域插槽6.1 默认插槽作用域传值6....
    99+
    2022-11-13
    Vue3插槽使用 Vue3插槽
  • Vue3中插槽(slot)的全部使用方法
    目录什么是插槽默认内容具名插槽动态插槽名作用域插槽作用域插槽具名作用域插槽写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是它的所有用法你是否全部理解呢？本篇文章...
    99+
    2024-04-02
  • Vue.js slot插槽的作用域插槽用法详解
    目录没有插槽的情况Vue2.x 插槽有插槽的情况具名插槽没有slot属性插槽简单实例应用作用域插槽 ( 2.1.0 新增 )Vue3.x 插槽插槽作用域插槽没有插槽的情况 <...
    99+
    2024-04-02
  • JavaScript--在Vue中使用插槽:slot
    目录在Vue中使用插槽：slot作用域插槽：使用template标签包裹总结在Vue中使用插槽：slot 1、在子组件的template里可以直接使用slot标签<slot&g...
    99+
    2024-04-02
  • Vue中插槽slot有什么用
    这篇文章主要为大家展示了“Vue中插槽slot有什么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue中插槽slot有什么用”这篇文章吧。什么是插槽？我们知道在Vue中 Child 组件的标...
    99+
    2023-06-15
  • Vue中slot插槽有什么用
    小编给大家分享一下Vue中slot插槽有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间...
    99+
    2023-06-25
  • 浅析Vue中插槽Slot的作用和具名插槽
    一、插槽Slot1.1.插槽Slot的作用⭐⭐ 初识插槽:为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；【相关推荐：vuejs视频教程】比如某种情况下我们使用组件，希望组件显示的是一个按钮，...
    99+
    2022-11-22
    Vue vue3 vue.js 插槽
  • 浅谈Vue中插槽slot的使用方法
    如何定义和使用： 在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值，如果slot标签没有声明name属性值，在使用插槽时将默认从第一个插槽依次往下...
    99+
    2024-04-02
  • Vue中插槽Slot基本使用与具名插槽详解
    目录一、插槽Slot1.1.插槽Slot的作用1.2.具名插槽SlotPs:作用域插槽总结一、插槽Slot 1.1.插槽Slot的作用 ⭐⭐初识插槽: 为了让这个组件具备更强的通用性...
    99+
    2022-11-13
    vue具名插槽用法 vue获取插槽 vue插槽用法
  • Vue中的插槽slot如何使用
    本篇内容主要讲解“Vue中的插槽slot如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue中的插槽slot如何使用”吧!1.什么是插槽插槽（slot）是 vue 为组件的封装者提供的能...
    99+
    2023-07-05
  • Vue插槽slot使用的方法是什么
    这篇文章主要介绍“Vue插槽slot使用的方法是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue插槽slot使用的方法是什么”文章能帮助大家解决问题。何为插槽我们都知道在父子组件间可以通过v...
    99+
    2023-07-05
  • vue2中插槽(slot)的基本使用规范
    目录前言基础slot组件(匿名插槽)具名插槽作用域插槽解构插槽总结前言 在vue的开发过程中，我们会经常使用到vue的slot插槽组件，vue官方文档的描述： Vue 实现了一套内容...
    99+
    2024-04-02
  • Vue中slot插槽作用与原理详解
    目录1、作用2、插槽内心2.1、默认插槽2.2、具名插槽（命名插槽）2.3、作用域插槽实现原理1、作用 父组件向子组件传递内容扩展、复用、定制组件 2、插槽内心 2.1、默认插槽 把...
    99+
    2024-04-02
  • vue.js动态组件和插槽的使用汇总
    目录组件进阶-props校验props校验组件进阶 - 动态组件组件进阶-keep-alive组件keep-alive组件进阶-keep-alive组件-指定缓存组件进阶 - 默认插...
    99+
    2024-04-02
  • vue3中的render函数里定义插槽和使用插槽
    目录render函数里定义插槽和使用插槽定义插槽定义有插槽的组件使用插槽vue3 render函数小变动render函数的参数render函数签名VNode属性格式render函数里...
    99+
    2024-04-02
  • oracle行转列方法集合汇总(推荐!)
    目录一、wm_concat函数（oracle12g版本开始不支持）二、listagg函数三、XMLagg函数（解决listagg函数字符串拼接过长问题）四、pivot函数（拆分列）总结wm_concat、listagg、...
    99+
    2023-04-10
    oracle行转列 oracle列转行汇总 oracle动态行转列
  • Vue中插槽slot的使用方法与应用场景详析
    什么是插槽？ 我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 。 可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签，vue新增了一种插槽...
    99+
    2024-04-02
  • Vue插槽slot全部使用方法示例解析
    目录何为插槽示例解析插槽的基本使用具名插槽作用域插槽总结何为插槽 我们都知道在父子组件间可以通过v-bind,v-model搭配props 的方式传递值，但是我们传递的值都是以一些数...
    99+
    2023-03-19
    Vue插槽slot用法 Vue slot Vue插槽
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作