背景介绍:外派到泰康做项目。这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就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. JAVA基础积累

    1.ajax同步和异步的区别: 同步是指一个线程要等待上一个线程执行完才能开始执行,同步可以看做是一个单线程操作,只要客户端请求了,在服务器没有反馈信息之前是一个线程阻塞状态.异步是一个线程在执行中, ...

  2. Django数据库,在原有表中添加新字段

    1.在你要添加新字段的app的 models.py 文件中添加需要新增的字段(这里新增的是dress字段): from django.db import models # Create your mo ...

  3. git rebase和git merge的用法

    http://softlab.sdut.edu.cn/blog/subaochen/2016/01/git-rebase%E5%92%8Cgit-merge%E7%9A%84%E7%94%A8%E6% ...

  4. Java多线中基础知识整理

    Java多线程中相关术语: 一.Java多线程原则 1.原子性:一个操作或者多个操作要么全部执行并且执行的过程不会被任何因素打断,要么就都不执行.一般使用线程同步或者Lock锁来确保. 2.可见性(J ...

  5. Windows10 磁盘100%解决办法

    此电脑->管理->任务计划程序->\Microsoft\Windows 一.\MemoryDiagnostic 禁用:ProcessMemoryDiagnosticEvents和Ru ...

  6. Fillder安装,如何解决证书无法导出

    Q: 安装配置完Fidder之后,点击导出证书,提示Creation of the root ceritificate  was not successful A :需执行dos命名. -cy aut ...

  7. 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

    简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...

  8. mysql8.0.13免安装版配置

    一.下载 下载地址:https://dev.mysql.com/downloads/mysql/ 二.解压到某个目录,例如:D:/mysql/mysql-8.0.13-winx64 三.配置环境变量 ...

  9. 博客搬家 https://hanwang945.github.io/

    博客搬家 https://hanwang945.github.io/

  10. CF1093F Vasya and Array

    题目链接:洛谷 以后还是要多打CF,不然就会错过这些很好的思维题了.我dp学得还是太烂,要多总结. 首先$len=1$就直接输出0. 我们考虑$dp[i][j]$表示前$i$个数的答案,而且第$i$个 ...