vue 父组件调用子组件内置方法_z-pan的博客-程序员秘密

技术标签: ViewUI  后端  javascript  

背景介绍:外派到泰康做项目。这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件。

                  但是后来发现他们的公司组织结构不是都请求的同一个接口,于是想着组件里面给加个url参数就可以了。但是他们的人员说一些参数数据都不同,

                  非要我在请求接口时在每个页面的父组件分别调用。我想着你们不觉得麻烦我也OK啦。然后就遇到了需要在父组件调用子组件方法的问题。

tree组件有个load 方法,我们要做的是在父组件能调用这个方法,并将他的默认参数node和resolve传过去
<el-tree v-show="isShowTree" class="bgClFFF treeBox" ref="selectTree" :data="treeData" node-key="label" accordion :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false" lazy :load="loadNodeChild" :render-content="renderContent" ></el-tree>

解决的方法如下:

子组件props里定义一个方法,用于接受父组件传过来的方法 
props: { loadNode: { type: Function,
default: "" }, }
methods里子组件触发加载数据方法时,调用父组件的方法,并将参数传过去
 loadNodeChild(node, resolve) {
  this.loadNode(node, resolve);
 },
// 父组件调用
  <Tree
   @chooseNewNode = "getTreeNode"
   :treeData="treeData"
    :loadNode = "loadNode"
  >
  </Tree>
然后在父组件的methods里调用这个方法
  loadNode(node, resolve){
    if (this.isFirstLoad) {
     // 第一次加载的数据
      resolve(this.treeData);
      this.isFirstLoad = false;
    } else {
     // 根据node的id发送请求,resolve(后端返回的data数组)
    if (node.data.id == "50000075O") {
      resolve(this.loadData);
    } else {
     resolve([]);
    }
   }
  }

 

     

转载于:https://www.cnblogs.com/zpxm/p/10577383.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30835649/article/details/98564851

智能推荐

电子邮箱怎么写?电子邮箱格式选择,电子邮件注册哪个好?_电子邮箱格式怎么写_贤惠的博客-程序员秘密

申请TOM邮箱后,支持使用随心邮,在微信你理收发邮件。填写电子邮箱地址和密码即可登录了,不需要设置服务器参数,让我们来看看TOMVIP邮箱的注册吧!电子邮箱怎么写?电子邮箱格式选择电子邮箱名称当然要选择一个比较靓的了,因为邮箱使用者的身份代表,简短是首选了,3-5位最好,lgy#163vip.com,名字缩写也不错,love#163.net情人节送朋友。注册TOM VIP至尊邮邮箱就可送这样的靓号,极致邮无限容量,群发400封。电子邮件注册哪个好?安全性:密码、垃圾邮件都会影响到邮箱的安全性,TOM

使用Charles3.11.2过程(附加下载Mac)_biglazyturtle的博客-程序员秘密

做iOS苦于没有UI素材和JSON或XML数据资源等,我们可以尝试用Charles来进行其他App捉包进行获取想要的素材。(真心想做出自己理想的app不是抄袭而是借助来学习)安装好javaforosx 之后再安装Charles-proxy-3.11.2复制charles.jar文件前往/Applications/Charles.app/Contents/Java进行覆盖过程

谁知道在连网的情况下使IE和QQ空间打不开啊。。QQ正常运行。。_weixin_34126557的博客-程序员秘密

能不能在连网的情况下使IE和QQ空间打不开啊。。QQ正常运行。。网页打开也是空白。。。QQ正常运行。 转载于:https://blog.51cto.com/2403184/472542...

Java List 转字符串并加入分隔符的方法_萧曵 丶的博客-程序员秘密

import org.apache.commons.lang.StringUtils;List&amp;lt;String&amp;gt; list=new ArrayList&amp;lt;String&amp;gt;();list.add(&quot;first&quot;);list.add(&quot;second&quot;);list.add(&quot;third&quot;);StringUtils.join(list.toArray(), &quot;,&quot;)

数据列表循环求和_dengsu9193的博客-程序员秘密

&lt;span class="price"&gt;¥&lt;em&gt;1.80&lt;/em&gt;&lt;/span&gt;&amp;nbsp;&lt;span&gt;白色&lt;/span&gt;&lt;span class="price"&gt;¥&lt;em&gt;1.50&lt;/em&gt;&lt;/span&gt;&amp;nbsp;&lt;span&gt;...

随便推点

论文阅读 End-to-End Semi-Supervised Learning for Video Action Detection_WXiujie123456的博客-程序员秘密

End-to-End Semi-Supervised Learning for Video Action Detection的阅读笔记 CVPR 2022task:端到端的半监督视频动作检测方法

Java IO 流 -- 转换流: InputStreamReader OutputStreamWriter_行者老夫的博客-程序员秘密

Java IO 流 -- 转换流: InputStreamReader OutputStreamWritjava 中 转换流是以字符流的形式操作字节流,需要注意一下两点:1、操作内容必须是纯文本2、指定字符集避免乱码操作控制台输入输出:try (BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); BufferedWriter bw = new BufferedWriter(new Outp...

java注解_Java注解_cunchi4221的博客-程序员秘密

java注解Java Annotations provides information about the code. Java annotations have no direct effect on the code they annotate. In java annotations tutorial, we will look into the following; Java注释提供有关代...

程序员职业规划的3个锦囊_BUG弄潮儿的博客-程序员秘密

java设计模式之观察者模式一大波视频分享Mysql代理中间件Atlas安装和配置我们在面试时经常会被问到一个问题——“你未来五年的职业规划是什么?”很多小伙伴不理解HR...

jenkins集成allure_小希zzz的博客-程序员秘密

一、jenkins插件中添加allure jenkis Pligin二、本地下载allure并且在jenkins的配置中添加路径三、jenkins构建中添加后置动作3.1 result-path为allure-results生成的原始文件文件夹,需要在源码里配置生成3.2report-path为html文件生成地址,由jenkins完成,我们只需要填写输出路径就可以了,我这边是放在\workspace\pytest_4\file 文件夹下四、file文件夹为.py文件位置用来运行pyte

Python中arcpy栅格创建与遥感影像多景数据批量拼接Mosaic_疯狂学习GIS的博客-程序员秘密

  本文介绍利用Python语言arcpy等模块,实现栅格图层建立与多幅遥感影像数据批量拼接(Mosaic)的操作。  首先,操作所需具体代码如下:import osimport arcpyfile_path="G:/Postgraduate/LAI_Glass_RTlab/A2018161_Dif/DRT/"out_file_path="G:/Postgraduate/LAI_Glass_RTlab/A2018161_Dif/DRT/"out_file_name="Global.tif"

推荐文章

热门文章

相关标签