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

模仿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.kler.cn/a/443949.html

相关文章:

  • 计算机网络之多路转接epoll
  • 免费GIS工具箱:轻松将glb文件转换成3DTiles文件
  • 项目搭建+删除(单/批)
  • Linux 文件系统目录结构及其简要介绍
  • Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导
  • 写入hive metastore报问题Permission denied: user=hadoop,inode=“/user/hive”
  • 第78期 | GPTSecurity周报
  • 【探商宝】风云突变!极越汽车深陷泥潭,从辉煌到暴雷的急坠之路
  • 【ArcGIS Pro】水文水资源、水生态与水环境
  • 华为OD E卷(100分)30-字符串变换最小字符串
  • 链接定位技术解析:如何实现精准 GPS 定位与 IP 地址获取
  • 使用 acme.sh 签发和自动续期 ssl https 证书
  • HCIA-Access V2.5_5_1PON系统概述_PON网络概述
  • UniApp 应用心得与总结(Android)
  • Java并发编程到底该怎么学?
  • 【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
  • 汽车功能安全(ISO 26262)学习笔记
  • 计算机网络知识点全梳理(四.IP知识点总结)
  • OpenCV基本图像处理操作(三)——图像轮廓
  • 多协议视频监控汇聚/视频安防系统Liveweb搭建智慧园区视频管理平台
  • OpenCV学习——图像融合
  • CTF-PWN: 在ORW受限情况手写code [第二届CN-fnst::CTF ez-sandbox] 赛后学习笔记
  • 【Leetcode 每日一题 - 扩展】45. 跳跃游戏 II
  • 超标量处理器设计笔记(11)发射内容:分配、仲裁、唤醒
  • WEB开发: 全栈工程师起步 - Python Flask +SQLite的管理系统实现
  • 作业Day4: 链表函数封装 ; 思维导图