vue2-slot是什么?

2023-11-06

1、slot是什么?
在html中slot元素,作为web Compoents技术套件的一部分,是Web组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充。
举例:在这里插入图片描述
template不会展示到页面中,需要先获取它的引用,然后添加到DOM中。
在这里插入图片描述
在vue中的概念也是如此。

Slot(插槽)花名:占坑,我们可以理解为slot在组件模板中占好了位置,当使用该组件标签的时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置),作为承载分发内容的出口,可以将其类比为插卡式的游戏机,游戏机暴露卡槽(插槽),让用户插入不同的游戏磁条(自定义内容)。

2、使用场景
通过插槽可以让用户可以拓展组件,去更好地复用组件和对其做定制化处理。
如果父组件在使用到一个复用组件的时候,获取这个组件在不同的地方有少量的修改,如果去重写组件是一个不明智地事情。
通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用。
比如:布局组件,表格列,下拉选框,弹框显示内容等。

3、分类
slot可以分为以下几种:
默认插槽
具名插槽
作用域插槽

默认插槽:子组件用标签来确定渲染的位置,标签里面可以放DOM结构,当父组件使用的时候没有往插槽里面传内容,标签内DOM结构就会显示在页面。
父组件在使用的时候,直接在子组件的标签内写入内容即可。
子组件Child.vue
在这里插入图片描述
父组件:
在这里插入图片描述

具名插槽:
子组件用name属性来表示插槽的名字,不传为默认插槽
父组件中在使用时在默认插槽的基础上加上slot属性,值为子组件插槽name属性值。
子组件Child.vue
在这里插入图片描述
父组件
在这里插入图片描述
作用域插槽:子组件在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件v-slot接受的对象上。
父组件中在使用时通过v-slot:(简写:#)获取子组件的信息,在内容中使用。
子组件Child.vue
在这里插入图片描述
父组件:
在这里插入图片描述
小结:
v-slot属性只能在上使用,但在只有默认插槽时可以在组件标签上使用
默认插槽名为default,可以省略default直接写为v-slot
缩写为#时不能不写参数,写成#default
可以通过解构获取v-slot={user},还可以重命名v-slot=”{user:newName}“和定义默认值v-slot=”{user=”默认值“}“

4、原理分析
slot本质上是返回Vnode的函数,一般情况下,vue中的组件要渲染到界面上需要经过template->render function->Vnode->DOM过程,这里看slot如何实现:
编写一个butterCounter组件,使用匿名插槽。
在这里插入图片描述
使用该组件
在这里插入图片描述
获取butterCounter组件渲染函数
在这里插入图片描述
_v表示一个普通的文本节点,_t表示渲染插槽的函数
渲染插槽函数renderSlot(做了简化)
在这里插入图片描述
name属性表示定义插槽的名字,默认值为default,fallback表示子组件中的slot节点的默认值。
关于this.$scopredSlots是什么,我们可以先看vm.slot
在这里插入图片描述
resolveSlots函数会对children节点做归类和过滤处理,返回slots
在这里插入图片描述
在这里插入图片描述
_render渲染函数通过normalizeScopedSlots得到下方变量
在这里插入图片描述
作用于插槽中父组件能够得到子组件的值是因为renderSlot的时候执行会传入props,也就是上述_t第三个参数,父组件则能够得到子组件传递过来的值。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue2-slot是什么? 的相关文章

  • 如何检测浏览器是否支持自定义元素

    我正在查看 Modernizr 它应该有助于功能检测 这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容 但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素 如果不是 Modernizr 我如
  • 如何在同一页面上使用AJAX处理多个表单

    我有一个表单 当我单击 提交 时 它就被提交了 然后该表单隐藏 操作页面的结果显示在 div 中 classname dig 它工作正常 但是当我添加另一个表单时 它停止正常工作并且所有表单同时提交 我如何更改我的代码 done click
  • 主干视图 DOM 元素已删除

    我一直在阅读有关 Backbone js 僵尸 或内存泄漏 问题的信息 基本上 当您不再需要该元素时 您必须从 DOM 中解除绑定并删除该元素 以确保所有事件也被删除 现在 我有一个包含几个容器的单页应用程序 div div div div
  • jquery.find() 可以只选择直接子项吗?

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • Meteor:应用程序无法在 0.9.1.1 版本上运行

    出现类似错误 Error TypeError undefined is not a function evaluating Template create anonymous function iron dynamic template j
  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • Javascript正则表达式用于字母字符和空格? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src
  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png

随机推荐

  • 基础算法题——异或(复杂度的小差异)

    异或 题目描述 给定一个长度为 n 初始全为 0 的数列 ai 下标从 1 开始 定义操作模 k 异或 v 为对所有满足 ki 0 mod k 的下标 i 将异或上整数v 即令 ai ai v 给出q次操作 每次操作之后输出序列的异或和 并
  • js插入前后

  • 【2023.07.15】生成模型(三)Score-based Generative Models

    1 main contribution 来自Score based Generative Model的原文 1 提供了一个统一SMLD denoising score matching with langevin dynamics 和DDP
  • MPLS LDP的原理与配置

    一 LDP协议的概述 1 LDP会话 本地会话 LSR之间是直连的 双方使用组播地址224 0 0 2建立会话 远程会话 LSR之间可以是非直连的 双方建立会话是使用单播建立的 缺省是本地会话 2 LDP领接体 只要双方建立了会话之后就建立
  • Flink+Hudi 构架湖仓一体化解决方案

    摘要 本文详细介绍了 Flink Hudi 湖仓一体化方案的原型构建 主要内容为 Hudi 新架构与湖仓一体 最佳实践 Flink on Hudi Flink CDC 2 0 on Hudi Tips FFA 2021 重磅开启 点击 阅读
  • tcp第三次握手ack均是1?

    本人做了tcp连接测试 但是结果和网络中其他人的说法有点不一致 测试使用了命令 tcpdump s1用网卡ens33抓取端口好为80的网络数据包 tcpdump nn i ens33 port 80 s2访问百度 建立3次连接请求数据 cu
  • P1094 [NOIP2007 普及组] 纪念品分组 Python (贪心算法)

    题目地址 P1094 NOIP2007 普及组 纪念品分组 又是一道水题 但CSDN上没有详细Python代码 于是我就来水一贴 对于想要学算法提升能力的同学来说可以刷这套题单 能力全面提升综合题单 读完题目后我们可以快速得出 既然要求最小
  • 青少年CTFmisc-simpleness

    提示弱口令 爆破出hint的密码123456 hint zip里面解出两个文件 hint png hint rar 这个hint rar是伪加密 随便打开一个十六进制的编辑器 这里的24表示已加密 改成20表示未加密 打开hint txt
  • 8B10B编解码的Verilog实现

    此篇是我在学习中做的归纳与总结 其中如果存在版权或知识错误或问题请直接联系我 欢迎留言 PS 本着知识共享的原则 此篇博客可以转载 但请标明出处 目录 0 8B 10B编码 0 0 8B 10B编码原理 0 1 8B 10B编码的FPGA实
  • pycharm调整字母长度分割线为80

    写过 python 的同学都知道 python 代码默认一行的长度不超过 80 个字符 但是 pycharm 默认的分割线在第 120 个字符处 需要作如下修改 设置 File gt Settings gt Code Style gt Ri
  • JetBrains全家桶使用说明

    一 二 三 友情推荐 激活获取地址
  • 泰勒公式和二项式展开定理的共同点

    泰勒公式和二项式展开定理的共同点 对于f x 1 x n 采用泰勒展开法有 f x fk0 0 x 0 0 fk1 0 x 1 1 fk2 0 x 2 2 其中fk0 0 fk1 0 分别代表fk x 的k阶导数 并且传0代替k阶导数中的x
  • 保姆级教程:Linux和Windows下本地化部署Vicuna模型

    目录 文章摘要 一 Vicuna简介 1 Vicuna模型定义 2 Vicuna模型的应用场景 3 Vicuna模型的训练数据 4 Vicuna模型的版本 5 性能评估 二 linux 操作系统下部署 1 环境介绍 2 安装Python3
  • Windows 动态磁盘卷:简单卷、跨区卷 、带区卷 、镜像卷 、RAID5卷 相关配置操作

    Windows Server 2003 提供了新的磁盘管理方式 能够提高磁盘性能和容错能力 将基本磁盘升级为动态磁盘 能够更灵活分配和管理磁盘空间 能够配置各种磁盘阵列提高磁盘能力 动态磁盘与基本磁盘对比 一块基本磁盘只能包含4个分区 它们
  • C语言——malloc与free

    文章目录 1 malloc 1 1 size t 1 2 malloc可申请的字节数 1 2 1 整形常量溢出 1 3 malloc一维数组 1 4 calloc 2 free 1 malloc 在堆区申请一个指定大小 连续的空间并返回空间
  • 使用FTP(IOS FTP客户端开发教程)

    本文翻译自新近Wrox出版社出版的 由Peter van de Put所著的 Professional iOS Programming 该书题材比较新颖 结构合理 是一本不错的IOS开发书籍 本文译自该书第八章 Using FTP 本文开放
  • C语言中的移位运算

    左移运算 对于一个位表示为的操作数 x x lt lt k 会生成一个指 其位表达式为 也就是说将x右边的w k位向左移动k位 丢弃最高的k位 并在右端补k个0 例如 操作数 x 位表达式为 01010101 x lt lt 3 将得到 1
  • 完成人机猜拳(0:石头;1:剪刀;2:布)游戏

    完成人机猜拳 0 石头 1 剪刀 2 布 游戏 详细代码见链接 共同学习 加油 文末有知识点分析 文章所使用的知识点if lese语句 if 条件1 print 条件为1 elif 条件2 print 条件为2 elif 条件3 print
  • 014人脸识别打卡签到系统pyqt界面

    目标检测一般是yolov3 yolov4 yolov5 yolox PSPnet faster rcnn SDD等 教学视频 银色子弹zg的个人空间 银色子弹zg个人主页 哔哩哔哩视频 效果图如下 完整的代码文件 其中dataset文件下是
  • vue2-slot是什么?

    1 slot是什么 在html中slot元素 作为web Compoents技术套件的一部分 是Web组件内的一个占位符 该占位符可以在后期使用自己的标记语言填充 举例 template不会展示到页面中 需要先获取它的引用 然后添加到DOM