vue中如何实现子组件等待父组件执行完成后再执行剩余代码?

Nidayee
  • 3
新手上路,请多包涵

问题描述

如标题所述,例如在父组件引用了button子组件,在点击button后,首先会调用button子组件的click方法,并在click方法中通过this.$emit("on-btn-click")触发父组件方法,如何实现等待父组件方法执行完成后再执行button子组件click方法的剩余代码?
类似于Promise的多重链式调用
上面描述只是举例,$emit只是触发父级组件事件肯定无法实现,不知道各位有什么好的解决方案?

回复
阅读 7.8k
2 个回答

把将要执行的剩余代码封装成函数传递给父组件,由父组件选择执行时间。
或者,子组件写个props属性,初始由父组件传入为false,当父组件执行完对应代码,改为true,子组件监听此属性

胡汉三
  • 2
新手上路,请多包涵

楼上老哥说的第一个方法我再补充一下代码吧

子组件把方法封装给父组件:

this.$emit('select', run => {

this.$message.success('保存成功') // 方法体,或者直接传方法也可以

})

父组件方法:

async select(run) {

// 等待方法执行
await this.getDialysisAdvice()
// 方法执行结束后调用子组件传回来的方法
run()

}

宣传栏