Question

我有一个简单的按钮，可以调用两个函数：在父组件和子组件中：

<btn @click.native="() => {functionParent();
$refs.childComponent.functionChild()}">Call functions<btn>

我知道箭头类型的调用@click是一种不好的做法，但我稍后会更正。

现在问题是functionParent()需要在functionChild()开始之前完成。但在我的情况下，functionChild()在functionParent()完成之前运行 - 这很糟糕。我该如何纠正？我想在functionChild()完成后致电functionParent()。有什么想法怎么做？

编辑：（更多细节）

父组件：

<child-comp
:result-array="resultArray"
ref="childComponent"> 
</child-comp>

<script>
methods: {
  functionParent() {
    this.resultArray = "result"
  }
}
</script>

子组件中的

：

<script>
props: ['resultArray'],
methods: {
   functionChild() {
      if (this.resultArray == "result")
       {return "correct"} else {return "done before functionParent()"
      }
}
</script>

edit2：我已将this.$refs.childComponent.functionChild()移至functionParent()的末尾，但未更改结果。在子组件获得修改后的resultArray

之前，似乎在子组件中调用函数

Answer 1

您可以使用promises解决此问题。它们是完美的。

在组件中创建一个按钮将调用的onClick函数。

使functionParent返回一个promise。

然后你的onClick功能看起来会像这样......

function onClick () {
  functionParent().then( () => {
    functionChild()
  })
}

您的函数父级看起来有点像......

functionParent () {
    return new Promise((resolve, reject) => {
    // do your stuff ....
    resolve()
  })
}

希望有所帮助。

你可以在这里找到有关承诺的信息..

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

使用超时不是一个好选择。无法保证您的功能将以正确的顺序完成

Answer 2

如果有人会遇到同样的问题 - 这是我发明的非常原始的解决方案，感谢@Meet Zaveri的帮助：

只需延时functionChild() functionParent()即可。在这种情况下：

functionParent() {
  this.resultArray = "result"
  setTimeout(() => {this.$refs.childComponent.functionChild();}, 100)
}

这将使Vue有时间将更新的resultArray发送到子道具

我知道可以而且应该有更好的解决方案，但如果您没有其他选择或想法，这是最简单的。

如果您有更好的答案，请在此处发布并告知我们！

父函数完成后，vuejs在子组件中调用函数

2 个答案: