背景介绍:外派到泰康做项目。这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就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([]);
    }
   }
  }

     

vue 父组件调用子组件内置方法的更多相关文章

  1. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  2. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  3. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  4. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  5. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  6. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

  7. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  8. 父组件调用子组件 viewChild

    父组件调用子组件 1.在子组件的ts中声明一个变量 public  lineout:any="你好,我是被父组件调用的子组件";  2.在父组件的html中写入 (引入子组件) & ...

  9. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

随机推荐

  1. linux系统运维命令

    1.动态查看网卡流量  sar -n DEV 1 2.查看当前网卡的buffer size情况 ethtool -g eth0 3.修改当前网卡的buffer size ethtool -G eth0 ...

  2. docker制作tomcat镜像

    准备cestos镜像.tomcat.jdk cestos是docker pull下来的 在/opt/下创建docker:mkdir -p /opt/docker 把tomcat和jdk解压到docke ...

  3. OpenDialog文件多选

    procedure TForm1.OpenFileListClick(Sender: TObject); var openDialog: TOpenDialog; I: Integer; begin ...

  4. vue中 this.$set的用法

    当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. <template> <div id=& ...

  5. xtrabackup工具备份与恢复

    1.xtrabackup简介 Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDB Hotbackup的一个很好的替代品.它能对 ...

  6. oo第二次博客总结

    不知道怎么说好呢,自己对自己也很没有信心的,希望自己能做出些许改变

  7. xamarin.forms 动态条件更换数据模板

    解决方案1:  https://oren.codes/2014/12/31/datatemplateselector-for-xamarin-forms/ 解决方案2:  https://docs.m ...

  8. Navicat for MySQL下载安装和破解教程

    1.进https://navicatformysql.en.softonic.com/官网 2.第二步 3.第三步等待下载完成 4.第四步双击 二,破解 1.链接:https://pan.baidu. ...

  9. 计算机网络网络层的IP地址划分及子码

    现在在网络层,即就是TCP/IP协议里的网际互联层,最流行IP协议的就是IPV4.其中IP地址的格式是由32位二进制数字表示的,通常为了人们阅读习惯,将其转换成点分十进制来表示,如:192.168.1 ...

  10. Nodejs在Ubuntu的部署和配置 samba

    在Ubuntu上安装samba 在10.04上安装samba时,先把samba卸载,不然会影响后面的安装. 0.卸载samba sudo apt-get remove samba-common sud ...