深入浅出 Vue 中的插槽 slot

深入浅出 Vue 中的插槽 slot

start

  • 最近被问到好几次 Vue 中的插槽相关知识，掌握的还是有些不全面。
  • 抱着重新学习的心态，写这篇博客。首先对基础知识做一个回顾，然后再对源码实现做一个学习。
  • 作者：番茄
  • 编写时间：2023/11/27

1.什么是插槽？

在日常代码编写的过程中，针对高频出现的业务场景，我会它把封装一个组件，然后多个地方去使用。

但是在某些情况下，一个组件并不能兼容所有的场景。

就比如对话框组件，可能每个人都会用到对话框，但是对话框中的内容会根据需求千变万化。这个时候就要考虑有没有什么方法，可以让我们对话框中的内容变成动态的呢？

答案：有，使用插槽就可以满足我们的需求。

插槽的概念有点类似 JavaScript 中的插值表达式，在代码在保留一个占位符，然后动态的向占位符中传入内容。

// 插值表达式
var name = '番茄'

var str = `<div>
我是 ${name}
</div>`

2. 插槽的使用

上面提到了插槽，现在我们结合示例，一步一步学习插槽的用法

1. 父组件引入子组件的基本用法

父组件 app.vue

<template>
  <div id="app">
    <Son></Son>
  </div>
</template>

<script>
import Son from "./son.vue";

export default {
  components: {
    Son,
  },
};

子组件 son.vue

<template>
  <div class="son">
    <h1>我是子组件 son</h1>
  </div>
</template>

运行效果

在这里插入图片描述

总结

上面的示例展示了一个基本的父组件使用子组件的用法。

2. 父组件在子组件中传入文本

父组件 app.vue

<template>
  <div id="app">
    <Son>
      向子组件中传入文本
    </Son>
  </div>
</template>

<script>
import Son from "./son.vue";

export default {
  components: {
    Son,
  },
};
</script>

子组件 son.vue

<template>
  <div class="son">
    <h1>我是子组件 son</h1>
  </div>
</template>

运行效果

在这里插入图片描述

总结

在父组件中使用子组件，当子组件中没有插槽没有 <slot></slot> 的时候，在父组件中向子组件中传递内容，这些内容并不会展示。

3.基础插槽的使用（不传入内容）

父组件 app.vue

<template>
  <div id="app">
    <Son>  </Son>
  </div>
</template>

<script>
import Son from "./son.vue";

export default {
  components: {
    Son,
  },
};
</script>

子组件 son.vue

<template>
  <div class="son">
    <h1>我是子组件 son</h1>

    <slot>
      我是插槽的默认内容
    </slot>
  </div>
</template>

运行效果

在这里插入图片描述

总结

上面的示例是一个基础的插槽使用演示。父组件使用子组件，但是不向子组件传入内容，此时，展示的内容是 <slot>默认内容</slot> 中默认的内容。

4. 基础插槽的使用（传入内容）

父组件 app.vue

<template>
  <div id="app">
    <Son>
       这是我自己DIY的内容
    </Son>
  </div>
</template>

<script>
import Son from "./son.vue";

export default {
  components: {
    Son,
  },
};
</script>

子组件 son.vue

<template>
  <div class="son">
    <h1>我是子组件 son</h1>

    <slot>
      我是插槽的默认内容
    </slot>
  </div>
</template>

运行效果

在这里插入图片描述

总结:

上面的示例是一个基础的插槽使用演示。父组件使用子组件，且向子组件传入内容。

此时，展示的内容是我们在父组件中传入的内容。此时就可以满足我们定制化的需要了。

这就是最基础的组件使用方法了

5. 同一个子组件，需要多个插槽如何处理？

掌握了插槽的基础使用方法后，会有一个衍生的问题。

如果同一个组件中需要多个插槽，如何处理？

答： 可以使用具名插槽，顾名思义，就是可以给插槽取名字，然后根据名称去匹配插槽。

父组件 app.vue

<template>
  <div id="app">
    <Son>
       这是我自己DIY的内容
    <template v-slot:lazy>
      LAZY
    </template>

    <template v-slot:tomato>
      TOMATO
    </template>
    </Son>
  </div>
</template>

<script>
import Son from "./son.vue";

export default {
  components: {
    Son,
  },
};
</script>
<style>
#app {
  width: 400px;
  height: 400px;
  background: pink;
}
</style>

子组件 son.vue

<template>
  <div class="son">
    <h1>我是子组件 son</h1>
    <br />

    <slot> 我是什么都不写的插槽 </slot>
    <br />

    <slot name="lazy"> 我是lazy </slot>
    <br />

    <slot name="tomato"> 我是tomato </slot>
    <br />

    <slot> 我是什么都不写222 </slot>
    <br />

    <slot name="lazy"> 我是lazy </slot>

  </div>
</template>
<style>
.son {
  background: yellow;
}
</style>

运行效果

在这里插入图片描述

总结

由上面的运行效果，我们知道：

  1. 针对一个组件中有多个插槽的情况，我们可以使用 name 对插槽进行命名。然后在父组件中使用插槽的时候，使用 <template> 标签，加上 v-solt:对应插槽名称 的形式匹配到对应的插槽；

  2. 在子组件组件中，没有写 name 属性的插槽，会默认的使用 default 名称，然后匹配没有被 template 标签包裹的内容；

  3. 子组件中相同 name 的插槽可以有多个；

    既然同一个组件中，可以存在多个相同 name 的插槽，是不是可以利用这个特性，实现重复内容的复制？

  4. 在使用v-solt 的时候，注意使用的是: 冒号连接，而且子组件绑定名称的时候， name= 的后面不需要添加引号。

    我在编写示例的时候，将 v-slot:lazy 误写成 v-slot=lazy 的形式了，发现代码并不生效。所以请注意使用的是冒号

    v-slot: 类似 v-on: v-bind: 都是指令，所以这个地方不要弄混淆了。

  5. v-slot:也和 v-on: v-bind: 类似，有语法糖 # 代替即可。

    在这里插入图片描述

  6. v-slot:单词不要打错了！！正确写法： **slot**

6. 作用域插槽

除了具名插槽，还有一种插槽：作用域插槽。

绝大多数情况，上面介绍的两种方式已经满足我们的业务需求了。

  1. 插槽默认值;
  2. 父组件定义插槽内容;

这两种方式，展示的数据和形式，由父组件控制。

但是还有一种情况，就是希望可以拿到子组件的数据，然后父组件控制如何展示。

这个时候就需要使用作用域插槽了。

子组件可以设置插槽的数据，然后数据如何展示，由外部的组件决定。

首先在子组件中绑定一个数据

:sonList="list" :向外暴露的变量名="子组件内部的变量名" > 子组件

子组件 son.vue

<template>
  <div class="son">
    <h1>我是子组件</h1>
    <br />
    <slot name="lazy" :sonList="list"> </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          index: 1,
          name: '张三',
        },
        {
          index: 2,
          name: '李四',
        },
        {
          index: 3,
          name: '王五',
        },
        {
          index: 4,
          name: '赵六',
        },
      ],
    }
  },
}
</script>

然后就是在父组件区使用我们的子组件，然后定义子组件插槽渲染的内容

v-slot:lazy="data",首先使用v-slot:lazy绑定我们的数据。然后在后面接等于号，用data去接收，然后再用data.子组件暴露的变量名使用

父组件 app.vue

<template>
  <div id="app">
    <Son>
      <template v-slot:lazy="data">
        LAZY
        {{ data.sonList }}
      </template>
    </Son>
  </div>
</template>

<script>
import Son from './son.vue'

export default {
  components: {
    Son,
  },
}
</script>

在这里插入图片描述

总结

  • 作用域插槽的使用方式：

    v-slot:插槽名="接收的变量名"：<template v-slot:插槽名="接收的变量名">

  • 其实本质上就是子组件向外暴露数据，父组件控制子组件具体展示。

小结

本文主要对 Vue 中的插槽的使用做了一个基础说明。

按照插槽的类型区分，可以分为三类：

  1. 默认插槽；
  2. 具名插槽；
  3. 作用域插槽；
  • 默认插槽就是绑定默认的内容；
  • 具名插槽就是给插槽定义名称，用以区分组件；
  • 作用域插槽就是子组件向外暴露数据，由父组件完全控制插槽内容的展示。

end

插槽的使用，整体难度不大。注意一下使用的语法即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/198818.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【藏经阁一起读】（78）__《Apache Tomcat 的云原生演进》

【藏经阁一起读】（78）__《Apache Tomcat 的云原生演进》

【藏经阁一起读】&#xff08;78&#xff09; __《Apache Tomcat 的云原生演进》 目录 __《Apache Tomcat 的云原生演进》 一、读后感 二、文章知识点摘要 2.1、Tomcat的技术内幕和在喜马拉雅的实践 2.2、GraalVM static compilation in web container application&…
阅读更多...
企业级开发链表思路

企业级开发链表思路

项目结构 头文件代码 头文件代码LinkList.h #ifndef LINKLIST_H #define LINKLIST_H #include <stdio.h> #include <stdlib.h> #include <iostream> // 链表小节点 typedef struct LINKBODE {struct LINKBODE* next;}LinkNode; // 遍历的函数指针 typedef …
阅读更多...
UE5、CesiumForUnreal实现加载GeoJson绘制多面（MultiPolygon）功能（支持点选高亮）

UE5、CesiumForUnreal实现加载GeoJson绘制多面（MultiPolygon）功能（支持点选高亮）

文章目录 1.实现目标2.实现过程2.1 数据与预处理2.2 GeoJson解析2.3 Mesh构建与属性存储2.4 核心代码2.5 材质2.6 蓝图应用测试3.参考资料1.实现目标 在之前的文章中，基于GeoJson数据加载，实现了绘制单面功能，但只支持单个要素Feature。本文这里实现对Geojson内所有面要素的…
阅读更多...
Python字典类型

Python字典类型

目录 目标 版本 官方文档 简介 实战 创建 循环 常用方法 目标 掌握字典类型的使用方法&#xff0c;包括&#xff1a;创建、循环、常用方法等操作。 版本 Python 3.12.0 官方文档 Mapping Types — dicthttps://docs.python.org/3/library/stdtypes.html#mapping-type…
阅读更多...
绝地求生：成长型皮肤异色定价是否有些夸张？

绝地求生：成长型皮肤异色定价是否有些夸张？

大家好&#xff0c;我闲游盒小盒子&#xff01; 自从26.2更新上架回归的黑市中四款成长型皮肤以后&#xff0c;能看到社区里很多玩家都分享抽中了自己心仪的成长型皮肤。 但是对于异色很少有人去实装&#xff0c;大多数玩家都是选择去分解异色换取五张图纸然后追求升级原皮等级…
阅读更多...
【PyQt】(自定义类)阴影遮罩

【PyQt】(自定义类)阴影遮罩

写了一个感觉有些用的小玩具。 用于给控件添加阴影遮罩(强调主控件的同时屏蔽其余控件的点击) 自定义阴影遮罩Mask&#xff1a; from PyQt5.QtCore import QPoint,QRect,Qt,QPoint,QSize from PyQt5.QtWidgets import QWidget,QLabel,QPushButton,QVBoxLayout from PyQt5.QtGu…
阅读更多...
L型骨牌覆盖问题。

L型骨牌覆盖问题。

问题&#xff1a;解决一个2k*2k的特殊棋牌上的L型骨牌覆盖问题。 思路&#xff1a; 棋盘覆盖实现的基本方法为分治法 当k0时(1ⅹ1棋盘)&#xff0c;及特殊方格&#xff0c;骨牌数为0 当k >0时&#xff0c;将2kⅹ2k棋盘分割为4个2k-1ⅹ2k-1子棋盘了 特殊方格位于4个较小…
阅读更多...
【3D程序软件】SideFX与上海道宁一直为设计师提供程序化 3D动画和视觉效果工具，旨在创造高质量的电影效果

【3D程序软件】SideFX与上海道宁一直为设计师提供程序化 3D动画和视觉效果工具，旨在创造高质量的电影效果

Houdini是一个 从头开始构建的程序系统 使艺术家能够自由工作 创建多次迭代 并与同事快速共享工作流程 Houdini FX为 视觉特效艺术家创作故事片 广告或视频游戏 凭借其基于程序节点的工作流程 Houdini FX可让 您更快地创建更多内容 从而缩短时间并 在所有创意任务中…
阅读更多...
制作电脑微信双开快捷方式

制作电脑微信双开快捷方式

一、介绍 电脑下载的微信正常只能打开一个&#xff0c;那有时候需要双开甚至多开微信我们需要怎么操作呢&#xff1f; 我这里就讲一个制作微信双开快捷键方式的办法&#xff0c;争对其他应用也是一样的原理。 二、制作过程 1、右击微信快捷方式 2、点击属性 3、复制目标 …
阅读更多...
微服务实战系列之Cache

微服务实战系列之Cache

前言 欢迎来到Cache&#xff08;缓存&#xff09;的世界&#xff01; 自从世界第一台计算机诞生之日起&#xff0c;人们对效率的渴望逐步增强。从CPU到存储&#xff0c;从芯片到内存&#xff0c;一批又一批的先驱以一种孜孜不倦的“工匠”精神&#xff0c;为计算机运行效率的提…
阅读更多...
MyBatis-Plus及多数据源入门教程

MyBatis-Plus及多数据源入门教程

开发环境配置 JDK 1.8、Maven 3.8.8、 IDEA CE 2023.2、MySQL 8.0.34 框架介绍 MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。MyBatis 是一款非常优秀的开源…
阅读更多...
快速了解Spring AOP的概念及使用

快速了解Spring AOP的概念及使用

文章目录 1. AOP概念1.1 什么是AOP&#xff1f;1.2 什么是Spring AOP&#xff1f; 2. Spring AOP的使用2.1 引入Spring AOP依赖2.2 编写AOP程序 3. Spring AOP详解3.1 Spring AOP核心概念1. 切点&#xff08;Pointcut&#xff09;2. 连接点&#xff08;Join Point&#xff09;3…
阅读更多...
C++ day37 贪心算法 单调递增的数字 监控二叉树

C++ day37 贪心算法 单调递增的数字 监控二叉树

题目1&#xff1a;738 单调递增的数字 题目链接&#xff1a;单调递增的数字 对题目的理解 返回小于或等于n的最大数字&#xff0c;且数字是单调递增&#xff08;单调递增数字的定义&#xff1a;每个相邻位上的数字满足x<y&#xff09; 贪心算法 注意本题的遍历顺序是从…
阅读更多...
【算法刷题】Day7

【算法刷题】Day7

文章目录 283. 移动零1089. 复写零 283. 移动零 原题链接 看到题目&#xff0c;首先看一下题干的要求&#xff0c;是在原数组内进行操作&#xff0c;平切保持非零元素的相对顺序 这个时候我们看到了示例一&#xff1a; [ 0, 1, 0, 3,12 ] 这个时候输出成为了 [ 1, 3, 12, 0, …
阅读更多...
16.spirng源码解析-registerBeanPostProcessors

16.spirng源码解析-registerBeanPostProcessors

注册拦截bean创建的bean处理器 此部分实质上是在BeanDefinitions中寻找BeanPostProcessor&#xff0c;之后调用BeanFactory.addBeanPostProcessor方法保存在一个List中&#xff0c;注意添加时仍然有优先级的概念&#xff0c;优先级高的在前面。
阅读更多...
内测分发平台是否支持敏捷开发和持续集成？

内测分发平台是否支持敏捷开发和持续集成？

大家好&#xff0c;我是咕噜-凯撒。敏捷开发和持续集成是软件开发中非常重要的流程和方法。内测分发平台作为应用开发和测试的关键环节需要具备这种能力。下面我简单的介绍一下敏捷开发和持续集成和提供的功能。图片来源&#xff1a;news.gulufenfa.com 敏捷开发是一种迭代、协…
阅读更多...
在 The Sandbox 设置总部，SCB 10X 和 T-POP 为 4EVE 元宇宙音乐会揭幕

在 The Sandbox 设置总部，SCB 10X 和 T-POP 为 4EVE 元宇宙音乐会揭幕

协作学习为全球粉丝提供了无限的可能性&#xff0c;让他们通过革命性的元宇宙体验沉浸在泰国流行文化中。 作为 SCBX 集团背后的创新力量&#xff0c;SCB 10X 很高兴宣布与 T-POP Incorporation 展开开创性合作&#xff0c;T-POP Incorporation 是泰国流行文化在全球舞台上的领…
阅读更多...
leetcode算法之字符串

leetcode算法之字符串

目录 1.最长公共前缀2.最长回文子串3.二进制求和4.字符串相乘 1.最长公共前缀 最长公共前缀 class Solution { public:string longestCommonPrefix(vector<string>& strs) {//法一&#xff1a;两两比较string ret strs[0];for(int i1;i<strs.size();i){ret f…
阅读更多...
Ps：子路径的上下排列以及对齐与分布

Ps：子路径的上下排列以及对齐与分布

不论是一个形状图层&#xff08;或图层的矢量蒙版&#xff09;上的多个形状还是同一路径层上多个路径&#xff0c;只要对应“路径”面板的一个路径层&#xff0c;可以将这些路径称为该路径层的“子路径”&#xff0c;也称为“组件”。 当一个路径层上有两个以上的子路径时&…
阅读更多...
量子力学：科技前沿的探索与挑战

量子力学：科技前沿的探索与挑战

量子力学：科技前沿的探索与挑战 一、量子力学的魅力与挑战 量子力学是研究微观粒子如电子、光子等行为的物理学分支。与经典力学不同，量子力学描述了一个充满不确定性和概率性的世界。在这个世界里，粒子可以同时处于多个状态，只有当我们对其进行测量时，它才会“选择”一个…
阅读更多...
最新文章

Copyright @ 2022~2023