模仿elementui的Table,实现思路

vue2子组件使用render,给子子组件插槽传值
和elementui的Table一样使用render
在 Vue 2 中,子组件使用render函数向子子组件插槽传值可以通过以下步骤实现:

1、创建子组件
首先创建一个子组件,在子组件中使用render函数来渲染内容。在render函数中,可以通过this. s l o t s . d e f a u l t 获取父组件传递过来的默认插槽内容,通过 t h i s . slots.default获取父组件传递过来的默认插槽内容,通过this. slots.default获取父组件传递过来的默认插槽内容,通过this.scopedSlots获取父组件传递过来的具名插槽内容。

Vue.component('child-component', {render: function (createElement) {// 获取父组件传递的默认插槽内容var defaultSlot = this.$slots.default;// 获取父组件传递的具名插槽内容var namedSlot = this.$scopedSlots && this.$scopedSlots.slotName;return createElement('div', [createElement('p', '这是子组件'),// 渲染默认插槽内容defaultSlot,// 渲染具名插槽内容namedSlot && namedSlot()]);}
});

2、创建子子组件
创建一个子子组件,该组件接收一个prop属性来获取父组件传递的值。

Vue.component('sub-child-component', {props: ['message'],template: '<div>{{ message }}</div>'
});

3、使用子组件和子子组件
在父组件中使用子组件,并通过插槽向子组件传递内容。在子组件中,通过this. s l o t s . d e f a u l t 或 t h i s . slots.default或this. slots.defaultthis.scopedSlots获取插槽内容,并将其传递给子子组件。

<div id="app"><child-component><sub-child-component slot="slotName" message="这是传递给子子组件的值"></sub-child-component></child-component>
</div>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac上详细配置java开发环境和软件(更新中)

文章目录 概要JDK的配置JDK下载安装配置JDK环境变量文件 Idea的安装Mysql安装和配置Navicat Premium16.1安装安装Vscode安装和配置Maven配置本地仓库配置阿里云私服Idea集成Maven Cpolar快速入门 概要 这里使用的是M3型片 14.6版本的Mac 用到的资源放在网盘 链接: https://pan…

Neo4j 图数据库安装与操作指南(以mac为例)

目录 一、安装前提条件 1.1 Java环境 1.2 Homebrew&#xff08;可选&#xff09; 二、下载并安装Neo4j 2.1 从官方网站下载 2.1.1 访问Neo4j的官方网站 2.1.2 使用Homebrew安装 三、配置Neo4j 3.1 设置环境变量(可选) 3.2 打开配置文件(bash_profile) 3.2.1 打开终端…

【数据结构练习题】链表与LinkedList

顺序表与链表LinkedList 选择题链表面试题1. 删除链表中等于给定值 val 的所有节点。2. 反转一个单链表。3. 给定一个带有头结点 head 的非空单链表&#xff0c;返回链表的中间结点。如果有两个中间结点&#xff0c;则返回第二个中间结点。4. 输入一个链表&#xff0c;输出该链…

图书借阅管理系统|SpringBoot|HTML|web网站|Java【源码+数据库文件+包部署成功+答疑解惑问到会为止】

代码包运行启动成功&#xff01;不管你有没有运行环境&#xff0c;哪怕你是刚买的新电脑&#xff0c;也包启动运行成功&#xff01;有不懂的地方随便问&#xff01;问到会为止&#xff01; 【功能介绍】 该系统有两种角色&#xff1a; 管理员&#xff0c;读者。 1.管理员可以添…

Qt Quick:CheckBox 复选框

复选框不止选中和未选中2种状态哦&#xff0c;它还有1种部分选中的状态。这3种状态都是Qt自带的&#xff0c;如果想让复选框有部分选中这个状态&#xff0c;需要将三态属性&#xff08;tristate&#xff09;设为true。 未选中的状态值为0&#xff0c;部分选中是1&#xff0c;选…

【ue5学习笔记2】在场景放入一个物体的蓝图输入事件无效?

在场景放入一个物体的蓝图输入事件无效&#xff0c;那是因为你不知道gameMode这个东西这是一个用于设定游戏股则的东西&#xff0c; 就好比你的控制对象&#xff0c;你输入无效是没有指定你当前关卡中指定的控制对象是它。操作方法如下&#xff1a; 1.创建一个gameMode蓝图类并…

pro文件转换为CMakeLists.txt文件,QT官方工具使用教程

某些情况需要使用cmake&#xff0c;如果手动将QT的pro文件转换成CMakeLists.txt&#xff0c;简短一点的pro还好&#xff0c;如果是比较复杂的pro&#xff0c;手动转换的时候需要长时间的debug&#xff0c;本人深有感受。 工具介绍&#xff1a; qmake2cmake工具创建一个CMakeL…

Python读取Excel批量写入到PPT生成词卡

一、问题的提出 有网友想把Excel表中的三列数据&#xff0c;分别是&#xff1a;单词、音标和释义分别写入到PPT当中&#xff0c;每一张PPT写一个单词的内容。这种批量操作是python的强项&#xff0c;尤其是在办公领域&#xff0c;它能较好地解放双手&#xff0c;读取Excel表后…

【快速上手】linux环境下Neo4j的安装与使用

一、neo4j简介 neo4j是一个非关系型图形数据库&#xff0c;非常适合处理具有复杂关系的数据集 存储方式&#xff1a;图形化存储 特点&#xff1a;将结构化数据存储在图上而不是表&#xff08;比如&#xff1a;MySQL数据库存储在表中&#xff09;中 neo4j也可以看作是一个高…

【看海的算法日记✨优选篇✨】第二回:流动之窗,探索算法的优雅之道

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 道阻且长&#xff0c;行则将至 目录 一、算法思想 双指针 滑动窗口 二、具体运用 1.⻓度最⼩的⼦数组 算法思路 算法流程 代码 2.最⼤…

Tool之Excalidraw:Excalidraw(开源的虚拟手绘风格白板)的简介、安装和使用方法、艾米莉应用之详细攻略

Tool之Excalidraw&#xff1a;Excalidraw(开源的虚拟手绘风格白板)的简介、安装和使用方法、艾米莉应用之详细攻略 目录 Excalidraw 简介 1、Excalidraw 的主要特点&#xff1a; Excalidraw 安装和使用方法 1、Excalidraw的安装 T1、使用 npm 安装&#xff1a; T2、使用 …

设计模式之【观察者模式】

观察者模式&#xff1a; 应用于发布-订阅消息模型中&#xff0c;订阅者订阅一个主题后&#xff0c;当有新消息到达时&#xff0c;所有订阅者都会收到通知。 主要关注的是对象之间的通信。是一种对象之间的一对多关系&#xff0c;多个对象依赖于一个对象&#xff0c;当被依赖的…

页面无滚动条,里面div各自有滚动条

一、双滚动条左右布局 实现效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Doc…

(Z Shell)zsh: no matches found: ? 使用单引号包裹

文章目录 dgqdgqdeMac-mini ProductAuthentication % git commit -m "open-type"{{isCodeValid ? getPhoneNumber : none}}"" zsh: no matches found: ?git commit -m open-type"{{isCodeValid ? getPhoneNumber : none}}"你遇到的 zsh: no m…

鸿蒙元服务从0到上架【第二篇】

第一招&#xff1a;在AppGallery后台下载对应的证书等文件 AppGallery后台 新增发布证书&#xff0c;具体操作可查看申请发布证书 申请发布Profile证书 第二招&#xff1a;在IDE中填写 第三招&#xff1a;打包【⚠️发布上架的只能是Build App】 终端展示这一片绿&#xf…

网络安全概论——身份认证

一、身份证明 身份证明可分为以下两大类 身份验证——“你是否是你所声称的你&#xff1f;”身份识别——“我是否知道你是谁&#xff1f;” 身份证明系统设计的三要素&#xff1a; 安全设备的系统强度用户的可接受性系统的成本 实现身份证明的基本途径 所知&#xff1a;个…

【学习记录】浏览器指纹相关学习记录(指纹介绍、获取指纹、修改指纹、随机指纹保护隐私等)

用途 不需要用户登录&#xff0c;可以识别是同一个用户&#xff0c;用于反爬虫广告推送等一类的场景 指纹在线查询地址 http://www.fingerprintbrowser.com/ CreepJS 浏览器指纹在线检测网站:代理IP防关联伪装度查询工具 IP检测大师 【自动化】Python SeleniumUtil 工具 开…

redis数据转移

可能有时候因为硬件的原因我们我们需要更换服务器&#xff0c;如果更换服务器的话&#xff0c;那我们redis的数据该怎样转移呢&#xff0c;按照一下步骤即可完成redis数据的转移 1.进入redis客户端 2.使用 bgsave命令进行数据的备份&#xff0c;此命令完成后会在你的redis安装目…

【MySQL】数据库 Navicat 可视化工具与 MySQL 命令行基本操作

&#x1f4af; 欢迎光临清流君的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落 &#x1f4af; &#x1f525; 个人主页:【清流君】&#x1f525; &#x1f4da; 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 &#x1f4da; &#x1f31f;始终保持好奇心&…

腾讯云智能结构化OCR:以多模态大模型技术为核心,推动跨行业高效精准的文档处理与数据提取新时代

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大三学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…