vue 父组件调用子组件内置方法

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