是否可以从安装在 Vuejs 中发射？

Posted 2023-02-23

【中文标题】是否可以从安装在 Vuejs 中发射？

【英文标题】：Is it possible to emit from mounted in Vuejs?

【发布时间】：2017-11-03 06:11:27

【问题描述】：

我熟悉通过总线在事件上发送数据，这些工作很好，但现在我想发出一些东西，但我没有一个事件可以绑定它。

我尝试在挂载时发出它，但效果如下：

mounted()
  bus.$emit('send-test', this.test);
,

【问题讨论】：

怎么不工作了？这应该可以正常工作。

我怀疑你不能在挂载时发出，因为你需要一个事件？如果我将它附加到手表中的事件，它工作正常。

您可以在挂载时发射。 codepen.io/Kradek/pen/eROrWM?editors=1010

这很奇怪。我需要发出的数据实际上来自计算属性。会不会是mounted上没有的？

已安装的计算值可用。 codepen.io/Kradek/pen/eROrWM?editors=1010

【参考方案1】：

当您在 parent 的 mounted 生命周期事件中为 child 的 mounted 事件中发出的事件添加事件处理程序时，处理程序不会捕获子进程发出的事件，因为在子进程已经发出事件之后添加了处理程序。基本上事件的循环是这样的。

父级创建 孩子的创作 儿童坐骑 父级挂载

显然还有其他生命周期事件发生，但在这种情况下，这才是重要的顺序。

如果要处理子级中发出的事件，则需要在子级的mounted 事件之前创建处理程序（调用$on）。

【讨论】：

@Bert 你会提供一个例子（最后一点）吗？我不太明白你的意思。

@phil 本质上这是答案的重点；最初的问题是为什么当父级添加处理程序以在父级已安装的生命周期处理程序中捕获事件时，父级没有捕获子级发出的事件。这一点太晚了。如果您想捕获在子生命周期的创建或挂载生命周期中发出的事件，您必须在父生命周期的创建生命周期事件中添加处理程序。

您可以同时在孩子上使用@hook:mounted，以了解它何时真正挂载。如本答案所述：***.com/a/55080141/8816585

【参考方案2】：

$nextTick 也可能有用，它解决了我的一个问题，可以这样使用

async mounted() 
  await this.$nextTick()
  // Code that will run only after the entire view has been rendered