父组件调用子组件的方法

image.png
1.点击编辑按钮出现弹窗,这个弹窗是一个子组件
2.子组件中有一个方法,需要点击编辑的时候去调用
实现的方法
`

//父组件中的编辑按钮
onEdit(row) {
  this.$nextTick(() => {
    // 调用子组件
    this.$refs.dialogTemplate.handleEdit(row.id);
    this.dialog.tabTitle = "编辑";
    this.dialog.isVisible = true;
  });
},

`
子组件在父组件中引用
`

<dialog-template
  ref="dialogTemplate">
 </dialog-template>

`
子组件的方法
`

 handleEdit(id) {
    //请求数据
 }

`
当进入页面后快速的点击编辑 会出现
image.png
刷新页面后 这个bug就没有了
请问大家有好的地方去调用子组件中的方法吗

阅读 2.6k
1 个回答

子组件还没挂载,延迟调用就行。

其实就是父子组件通讯,也可以用一个变量控制,子组件监听变量,然后自己调用函数

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题