当前位置: 首页 > news >正文

【面试题】vue中的插槽是什么?

大厂面试题分享 面试题库

后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

一、slot是什么

在HTML中 slot 元素 ,作为 Web Components 技术套件的一部分,是Web组件内的一个占位符

该占位符可以在后期使用自己的标记语言填充

举个栗子

<template id="element-details-template"><slot name="element-name">Slot template</slot>
</template>
<element-details><span slot="element-name">1</span>
</element-details>
<element-details><span slot="element-name">2</span>
</element-details>

template不会展示到页面中,需要用先获取它的引用,然后添加到DOM中,

customElements.define('element-details',class extends HTMLElement {constructor() {super();const template = document.getElementById('element-details-template').content;const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));}
})

在Vue中的概念也是如此

Slot 艺名插槽,花名“占坑”,我们可以理解为solt在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置),作为承载分发内容的出口

可以将其类比为插卡式的FC游戏机,游戏机暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容)

放张图感受一下

二、使用场景

通过插槽可以让用户可以拓展组件,去更好地复用组件和对其做定制化处理

如果父组件在使用到一个复用组件的时候,获取这个组件在不同的地方有少量的更改,如果去重写组件是一件不明智的事情

通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用

比如布局组件、表格列、下拉选、弹框显示内容等

三、分类

slot可以分来以下三种:

  • 默认插槽

  • 具名插槽

  • 作用域插槽

默认插槽

子组件用<slot>标签来确定渲染的位置,标签里面可以放DOM结构,当父组件使用的时候没有往插槽传入内容,标签内DOM结构就会显示在页面

父组件在使用的时候,直接在子组件的标签内写入内容即可

子组件Child.vue

<template><slot><p>插槽后备的内容</p></slot>
</template>

父组件

<Child><div>默认插槽</div>  
</Child>

具名插槽

子组件用name属性来表示插槽的名字,不传为默认插槽

父组件中在使用时在默认插槽的基础上加上slot属性,值为子组件插槽name属性值

子组件Child.vue

<template><slot>插槽后备的内容</slot><slot name="content">插槽后备的内容</slot>
</template>

父组件

<child><template v-slot:default>具名插槽</template><!-- 具名插槽⽤插槽名做参数 --><template v-slot:content>内容...</template>
</child>

作用域插槽

子组件在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:(简写:)获取子组件的信息,在内容中使用

子组件Child.vue

<template> <slot name="footer" testProps="子组件的值"><h3>没传footer插槽</h3></slot>
</template>

父组件

<child> <!-- 把v-slot的值指定为作⽤域上下⽂对象 --><template v-slot:default="slotProps">来⾃⼦组件数据:{{slotProps.testProps}}</template><template default="slotProps">来⾃⼦组件数据:{{slotProps.testProps}}</template>
</child>

小结:

  • v-slot属性只能在<template>上使用,但在只有默认插槽时可以在组件标签上使用

  • 默认插槽名为default,可以省略default直接写v-slot

  • 缩写为时不能不写参数,写成default

  • 可以通过解构获取v-slot={user},还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"

四、原理分析

slot本质上是返回VNode的函数,一般情况下,Vue中的组件要渲染到页面上需要经过template -> render function -> VNode -> DOM 过程,这里看看slot如何实现:

编写一个buttonCounter组件,使用匿名插槽

Vue.component('button-counter', {template: '<div> <slot>我是默认内容</slot></div>'
})

使用该组件

new Vue({el: 'app',template: '<button-counter><span>我是slot传入内容</span></button-counter>',components:{buttonCounter}
})

获取buttonCounter组件渲染函数

(function anonymous(
) {
with(this){return _c('div',[_t("default",[_v("我是默认内容")])],2)}
})

_v表示穿件普通文本节点,_t表示渲染插槽的函数

渲染插槽函数renderSlot(做了简化)

function renderSlot (name,fallback,props,bindObject
) {// 得到渲染插槽内容的函数    var scopedSlotFn = this.$scopedSlots[name];var nodes;// 如果存在插槽渲染函数,则执行插槽渲染函数,生成nodes节点返回// 否则使用默认值nodes = scopedSlotFn(props) || fallback;return nodes;
}

name属性表示定义插槽的名字,默认值为default,fallback表示子组件中的slot节点的默认值

关于this.$scopredSlots是什么,我们可以先看看vm.slot

function initRender (vm) {...vm.$slots = resolveSlots(options._renderChildren, renderContext);...
}

resolveSlots函数会对children节点做归类和过滤处理,返回slots

function resolveSlots (children,context) {if (!children || !children.length) {return {}}var slots = {};for (var i = 0, l = children.length; i < l; i++) {var child = children[i];var data = child.data;// remove slot attribute if the node is resolved as a Vue slot nodeif (data && data.attrs && data.attrs.slot) {delete data.attrs.slot;}// named slots should only be respected if the vnode was rendered in the// same context.if ((child.context === context || child.fnContext === context) &&data && data.slot != null) {// 如果slot存在(slot="header") 则拿对应的值作为keyvar name = data.slot;var slot = (slots[name] || (slots[name] = []));// 如果是tempalte元素 则把template的children添加进数组中,这也就是为什么你写的template标签并不会渲染成另一个标签到页面if (child.tag === 'template') {slot.push.apply(slot, child.children || []);} else {slot.push(child);}} else {// 如果没有就默认是default(slots.default || (slots.default = [])).push(child);}}// ignore slots that contains only whitespacefor (var name$1 in slots) {if (slots[name$1].every(isWhitespace)) {delete slots[name$1];}}return slots
}

_render渲染函数通过normalizeScopedSlots得到vm.$scopedSlots

vm.$scopedSlots = normalizeScopedSlots(_parentVnode.data.scopedSlots,vm.$slots,vm.$scopedSlots
);

作用域插槽中父组件能够得到子组件的值是因为在renderSlot的时候执行会传入props,也就是上述_t第三个参数,父组件则能够得到子组件传递过来的值

大厂面试题分享 面试题库

后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

相关文章:

【面试题】vue中的插槽是什么?

大厂面试题分享 面试题库后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面试题库一、slot是什么在HTML中 slot 元素 &#xff0c;作为 Web Components 技术套件的一部分&#xff0c;是Web组件内的一个占位符该占位符可以在后期…...

Go语言结构体struct详解,Go空结构体的这些妙用你知道吗?

本文详解了Go语言结构体的各个知识点&#xff0c;最后介绍了空结构体的3种妙用。希望对你有帮助。 定义 结构体&#xff0c;是一种自定义的数据类型&#xff0c;由多个数据类型组合而成。用于描述一类事物相关属性。 定义方式&#xff1a; type 类型名 struct {字段名 字段类…...

华为OD机试 - 航天器(Python) | 机试题+算法思路+考点+代码解析 【2023】

航天器 题目 给航天器一侧加装长方形和正方形的太阳能板(图中的斜线区域); 需要先安装两个支柱(图中的黑色竖条); 再在支柱的中间部分固定太阳能板; 但航天器不同位置的支柱长度不同; 太阳能板的安装面积受限于最短一侧的那支支柱的长度; 现提供一组整型数组的支柱高度数据;…...

【Optional】告别丑陋判空,使用Optional类

一、概述 当项目中充斥着大量的、丑陋的判空语句&#xff0c;如下&#xff1a; if (user ! null) {Address address user.getAddress();if (address ! null) {Country country address.getCountry();if (country ! null) {String isocode country.getIsocode();if (isocod…...

魔兽世界服务端端新手搭建教程

明杰也是很久以前开始研究魔兽服务器架设&#xff0c;主要原因是亚服经常要排队6-7个小时&#xff0c;去不排除的服和单机没啥区别&#xff0c;以怀旧服玩到10级以后就开始玩335端&#xff0c;一开始也和新入手的人一样云里雾里的&#xff0c;经过长时间的学习总算有点成就,向新…...

宝塔搭建实战人才求职管理系统mobile手机端vue源码(五)

大家好啊&#xff0c;我是测评君&#xff0c;欢迎来到web测评。 上一期给大家分享骑士cms会员管理member前端vue在本地运行打包、宝塔发布部署的方式&#xff0c;本期给大家分享&#xff0c;mobile移动端vue怎么在本地运行&#xff0c;打包&#xff0c;实现线上功能更新替换的方…...

生态应用:探讨 NGINX 与上下游系统集成时的开发经验

NGINX 作为一款高性能的 Web 服务器和反向代理服务器&#xff0c;在各种应用场景中广泛应用。随着业务的发展&#xff0c;我们在使用 NGINX 时&#xff0c;可能需要将其与其他系统进行集成&#xff0c;以实现更加复杂的业务需求。 本文将结合实际应用场景&#xff0c;探讨 NGI…...

ArcGIS批量拼接大量栅格遥感影像:Mosaic工具

本文介绍在ArcGIS下属的ArcMap软件中&#xff0c;基于Mosaic工具&#xff0c;批量对大量栅格遥感影像文件加以拼接、镶嵌的方法。 在GIS应用中&#xff0c;我们时常需要对大量栅格遥感影像数据加以批量拼接的工作。这一步骤可以基于Python语言实现&#xff0c;具体可以参考文章…...

Flink UI部署jar包报错

错误描述&#xff1a; 通过Flink的UI中的Submit New Job菜单添加jar包的时候提示报错。报错信息的关键字是“The LocalStreamEnvironment cannot be used when submitting a program through a client, or running in a TestEnvironment context”&#xff0c;最关键的是“Loc…...

Linux就该这么学:RAID与LVM磁盘阵列技术

这里写目录标题 7.1.1 部署磁盘阵列7.1.2 损坏磁盘阵列及修复7.1.3 磁盘阵列+备份盘7.1.4 删除磁盘阵列1. 需要将所有的磁盘都设置成停用状态:2. 逐一移除出去3. 续停用整个RAID磁盘阵列7.2 LVM逻辑卷管理器7.2.1 部署逻辑卷7.2.2 扩容逻辑卷7.2.3 缩小逻辑卷7.2.4 逻辑卷快照…...

Prometheus+Grafana监控

1、简介1.1 Prometheus官网地址&#xff1a;https://prometheus.io/Prometheus是一个开源的监控系统&#xff0c;起源于SoundCloud。它由以下几个核心组件构成&#xff1a;数据爬虫&#xff1a; 根据配置的时间定期的通过HTTP抓去metrics数据。time-series 数据库&#xff1a; …...

【JUC2022】第三章 线程中断与 LockSupport

【JUC2022】第三章 线程中断与 LockSupport 文章目录【JUC2022】第三章 线程中断与 LockSupport一、线程中断1.什么是中断机制2.中断 API3.代码实现4.Thread.sleep()二、LockSupport1.什么是 LockSupport2.代码实现3.总结一、线程中断 1.什么是中断机制 首先&#xff0c;一个…...

数据结构刷题(七):202快乐数、1两数之和、454四数相加II、15三数之和、18四树之和

1.快乐数题目链接思路&#xff1a;使用set&#xff0c;当set中出现相同元素时&#xff0c;返回false注意&#xff1a;while循环中语句顺序&#xff1b; 除数取余。解法&#xff1a;public boolean isHappy(int n){Set<Integer> res new HashSet<>();int[] arr ne…...

华为机试题:HJ80 整型数组合并(python)

文章目录知识点详解1、input()&#xff1a;获取控制台&#xff08;任意形式&#xff09;的输入。输出均为字符串类型。  1.1、int(input()) 与 map(int, input().spilt()) 的区别  1.2、input() 与 list(input()) 的区别、及其相互转换方法2、print() &#xff1a;打印输出…...

spring boot——自定义依赖实现自动配置

需求 要实现的功能是&#xff1a;实现一个可以支持miniooss两种方式&#xff0c;上传下载文件的自定义依赖。其中还包括一些创建桶、删除桶、删除文件等功能&#xff0c;但是最主要的是实现自动配置。 如果对spring理解很深的话&#xff0c;自动配置这些东西很容易理解&#…...

QMap 判断是否value是否已经存在,结合Sleep函数测试

网上查了资料&#xff0c;基本说的都是通过.value判断是否已经之前的key值&#xff0c;但是尝试.了一下发现有.key的函数&#xff0c;对比着来就感觉这个函数是用来判断是否已经存在value值&#xff0c;于是开始百度也几乎没有找到相关资料&#xff0c;只好自己看官方文档&…...

vue后台管理系统项目-table选择多行数据分页列表、一键全选重置功能

table选择多行数据 功能介绍&#xff1a; 1.列表分页功能&#xff1b; 2.一键全选&#xff0c;选中列表所有数据&#xff1b; 3.全选&#xff0c;选中当前页数据&#xff1b; 4.重置&#xff0c;清除选中状态&#xff1b; 5.列表搜索查询&#xff1b; 效果&#xff1a; 1.列表分…...

论文解读 | [CVPR2019] 基于自适应文本区域表示的任意形状场景文本检测

目录 1 研究背景及意义 2 总体设计 3 方法论 3.1 自适应文本区域表示 3.2 文本建议 3.3 建议改进 4 损失函数 5 实验及结果 1 研究背景及意义 现有的场景文本检测方法使用固定点数的多边形来 表示文本区域。例如&#xff0c;水平文本使用2个点(左上/右下)表示文本区域&…...

2月编程语言排行榜谁还没有看?

近日&#xff0c;TIOBE公布了2023年2月编程语言排行榜&#xff0c;本月各个语言表现如何&#xff1f;谁又摘得桂冠&#xff1f;一起来看看吧&#xff01; TIOBE 2月Top15编程语言&#xff1a; 详细榜单查看TIOBE官网 https://www.tiobe.com/tiobe-index/ 关注IT行业的小伙伴们…...

nginx.conf配置方法详细介绍

从前面的内容学习中&#xff0c;我们知道Nginx的核心配置文件默认是放在/usr/local/nginx/conf/nginx.conf&#xff0c;这一节&#xff0c;我们就来学习下nginx.conf的内容和基本配置方法。读取Nginx自带的Nginx配置文件&#xff0c;我们将其中的注释部分【学习一个技术点就是在…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...