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

模仿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.lryc.cn/news/508692.html

相关文章:

  • Unity中使用环形缓冲区平滑抖动值
  • 【Yonghong 企业日常问题 06】上传的文件不在白名单,修改allow.jar.digest属性添加允许上传的文件SH256值?
  • SpringBoot使用 AOP 实现自定义日志记录并保存在Mysql
  • 谷歌开源最强天气预报AI模型 GenCast
  • C++打造局域网聊天室第十课: 客户端编程及数据发送
  • Nginx整合Lua脚本
  • 【C++】C++11 STL容器emplace方法原理剖析
  • QT-简单视觉框架代码
  • AI新书推荐:深度学习和大模型原理与实践(清华社)
  • [spring]处理器
  • 重温设计模式--中介者模式
  • 重温设计模式--设计模式七大原则
  • LeetCode429周赛T4
  • 详解MySQL在Windows上的安装
  • 【Python使用】嘿马python高级进阶全体系教程第10篇:静态Web服务器-返回固定页面数据,1. 开发自己的静态Web服务器【附代码文档】
  • 软件测试面试题和简历模板(面试前准备篇)
  • Linux 基本使用和程序部署
  • uniapp微信小程序,使用fastadmin完成一个一键获取微信手机号的功能
  • CSS系列(27)- 图形与滤镜详解
  • Docker 技术系列之安装多版本Mysql5.6和Mysql5.7
  • 理解并使用Linux 内核中的 Tracepoint
  • centos7中Gbase8s数据库安装,以及数据导入遇到的一系列问题
  • AW36518芯片手册解读(3)
  • MySQL的REPEATABLE READ事务隔离级别
  • sqoop的参数有哪些?
  • 动态规划<四> 回文串问题(含对应LeetcodeOJ题)
  • 跨模态知识迁移:基于预训练语言模型的时序数据建模
  • 重温设计模式--职责链模式
  • git冲突解决
  • Java学习笔记(14)--面向对象编程