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

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

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

  1. tree组件有个load 方法,我们要做的是在父组件能调用这个方法,并将他的默认参数noderesolve传过去
    <el-tree
  2. v-show="isShowTree"
  3. class="bgClFFF treeBox"
  4. ref="selectTree"
  5. :data="treeData"
  6. node-key="label"
  7. accordion
  8. :props="defaultProps"
  9. @node-click="handleNodeClick"
  10. :expand-on-click-node="false"
  11. lazy
  12. :load="loadNodeChild"
  13. :render-content="renderContent"
  14. ></el-tree>

解决的方法如下:

  1. 子组件props里定义一个方法,用于接受父组件传过来的方法
    props: {
  2. loadNode: {
  3. type: Function,
  4. default: ""
  5. },
  6. }
    methods里子组件触发加载数据方法时,调用父组件的方法,并将参数传过去
 loadNodeChild(node, resolve) {
  this.loadNode(node, resolve);
 },
  1. // 父组件调用
  <Tree
   @chooseNewNode = "getTreeNode"
   :treeData="treeData"
   :loadNode = "loadNode"
  >
  </Tree>
  1. 然后在父组件的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磁盘大小获取和文件大小获取

    一.获取磁盘大小(给入的是文件夹绝对路径):check_disk_available(QString path) { struct statfs diskinfo; unsigned long lon ...

  2. 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% ...

  3. DDoS攻击及防御措施

    SYN flood 伪造大量的源IP地址,分别向服务器端发送大量的SYN包,此时服务器端会返回SYN/ACK 包,因为伪造的IP并不会答应,服务器端并没有收到伪造的IP的回应,会重试3~5次并等待一个 ...

  4. robot framework 提示‘pybot 不是内部命令’

    command: pybot.bat --argumentfile c:\*\RIDEzsxpul.d\argfile.txt --listener C:\Python27\lib\site-pack ...

  5. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  6. 使用Apache JMeter对SQL Server、Mysql、Oracle压力测试(二)

    接着第一篇的写: 第三步,测试SQL Server数据库的性能: a.加载JDBC SQL Server驱动.添加线程组和设置线程属性和第二步一样,就不再赘述了: b.设置JDBC Connectio ...

  7. spider随机请求头和ip

    #创建爬虫 scrapy genspider randomIp_spider "taobao.com" #把需要请求的url放到一个混淆的url请求list中去,避免被监测到总是访 ...

  8. zw-clay字王胶泥体系列

    zw-clay字王胶泥体系列 zw-clay字王胶泥体系列,2018新版,也是在2012版本的基础上升级的. 字王胶泥体系列的idea,源自黏土动画电影的制作模式.同样,字王胶泥体系列,也非常适合于动 ...

  9. CentOS6.5 切换 图形界面 与 命令行界面

    CentOS6.5 切换图形界面与命令行界面 [1]场景1:图形界面 -> 命令行界面 方式一(快捷键):Ctrl + Alt + F2 方式二(终端命令):init 3 (PS:init与3之 ...

  10. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...