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

【问题标题】：vuejs calling function in child component after parent function is completed父函数完成后vuejs在子组件中调用函数
【发布时间】：2018-09-12 14:58:46
【问题描述】：

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

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

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

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

编辑：（更多细节）

父组件：

<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

【问题讨论】：

@MeetZaveri 我添加了我的代码的更多细节
啊哈！很好地检测到这种行为
查看这个代码框。看看这个 - codesandbox.io/s/k1oq33qrqv
@MeetZaveri 是的，谢谢，现在可以使用了，但谁知道它什么时候会崩溃 :)
好的，但是如果几天后有人没有在这里回复，您可以添加您的原始解决方案作为 SO 肯定会接受的唯一答案

标签： javascript vue.js

【解决方案1】：

您可以使用 Promise 解决此问题。它们非常适合这个。

在您的组件中为您自己创建一个按钮将调用的 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

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

【讨论】：

感谢您的回答 - 这是函数顺序的最佳实践。然而，这个问题似乎还有其他原因——两个函数（一个接一个都没有关系）在 resultArray 通过 props 发送到子组件之前执行。因此，您的事件顺序为： 1. functionParent() 2. funcionChild() 3. 将更新的resultArray 发送到子组件。应该是这样的： 1. functionParent() 2. 将更新后的结果数组发送到子组件。 3.funcionChild()。这就是为什么 Promise 在这里不起作用，但 timeout 却...
也许这不是解决这个问题的正确架构。 vuex store 可能是一个更好的解决方案，或者创建一个可以在组件之间共享数据的简单服务。依靠超时感觉不正确。
我完全同意。我可能会进入 vuex，但现在我仍然依赖更简单的解决方案

【解决方案2】：

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

只需从functionParent() 呼叫functionChild() 并有时间延迟。在这种情况下：

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

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

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

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

【讨论】：

投了反对票，因为尝试通过超时控制流量非常脆弱。在一台机器/网络/环境上工作的东西在另一台机器/网络/环境上的表现可能完全不同。
@PatrickSteele 我尊重你的意见，因为我提到这是非常原始的解决方案，应该避免，但现在我看不到更好的，所以这是我发布的