父组件调用子组件的方法报 undefined

问题遇到的现象和发生背景

1.新增,编辑共用一个弹窗,这个弹窗是子组件,在子组件中有一个editShow()方法,用来接收父组件的值做回显

    <dialog-template
      ref="dialogTemplate"
      :title="dialog.tabTitle"
      :dialogTableVisible="dialog.isVisible"
      visibleWidth="666px"
      @getFundList="getDataList"
      @closeVisible="closeVisible"
      :editData="dialog.editData"
    ></dialog-template>

子组件的引用

2.触发editShow的场景就是:
父组件中有一个编辑btn,点击编辑调用editShow(row),顺带把父组件的值给editShow(row),在子组件中做回显

问题相关代码，请勿粘贴截图

    //修改
    onEdit(row) {
      this.dialog.isVisible = true;
      this.$nextTick(() => {
        console.log(this.$refs);
        if (this.$refs.dialogTemplate != undefined) {
          this.$refs.dialogTemplate.editShow(row);
        }
      });
    },

子组件editShow()方法

    editShow(data) {
      this.form = data;
    },

运行结果及报错内容

我的解答思路和尝试过的方法

加定时器,还是会报错

我想要达到的结果

父向子传值,在子组件中做回显,新建时,表单重置
请大家帮忙看下 有偿
发现按钮在html中的话 编辑时是可以获取到子组件中的方法的
举例:

<el-form-item>
  <el-button type="info" size="mini" @click="onEdit()">编辑</el-button>
</el-form-item>

此写法没有问题

这个tableBtn 是声明在data中的 这么写的原因就是给table做了封装,表格的头部,content, 按钮 分为了3个js
tableBtn: {
  renderBody: (h, row) => [
    <el-link
       class="table-operation-link"
       type="primary"
       onClick={() => this.onEdit(row)}
       title="修改"
       underline={false}
          >
        <span class="iconfont icon-web-icon-"></span>
     </el-link>,
]
},
这种形式写的话 就会出现this.$res.xx.undefined

以上就是在调用子组件的方法时踩的坑

onEdit(row) {
      this.dialog.isVisible = true;
     if (this.$refs.dialogTemplate) {
        this.$nextTick(() => {
          this.$refs.dialogTemplate.editShow(row);
        });
     }
    },

调用组件的的ref=“dialogTemplate" 名字给对了吗

父传子，可以直接用v-bind，推荐这样好点

    onEdit(row) {
      this.dialog.isVisible = true;
      this.$nextTick(() => {
        console.log('this.$refs.dialogTemplate', this.$refs.dialogTemplate)
      });
     }
    //打印this.$refs.dialogTemplate出来看一下  

换了一种思路解决了 这个问题:
使用了:editData="dialog.row" 使用v-bind绑定值传过去的
具体代码如下

    //修改
    onEdit(row) {
      this.dialog.tabTitle = "修改运维管理";
      this.dialog.isVisible = true;
      this.dialog.editData = row;
    },
子组件
  <el-dialog
      :title="title"
      :visible.sync="dialogTableVisible"
      :before-close="handVisible"
      :close-on-click-modal="false"
      :width="visibleWidth"
      ref="dialog"
      @open="open">
  </dialog>
在open事件中做赋值操作
    open() {
      this.$nextTick(() => {
        if (this.title === "修改") {
          this.form = this.editData;
        }
      });
    },