在没有点击事件的情况下使用 $emit

Posted 2023-02-22

【中文标题】在没有点击事件的情况下使用 $emit

【英文标题】：Use $emit without a click event

【发布时间】：2021-08-07 18:21:09

【问题描述】：

我是 Vue 新手，有些东西我还不明白。

在第一个孩子中，有一个点击事件来$emit 信息给下一个孩子。但是在另一个孩子中，第二个孩子，无论如何都可以使用 $emit 将信息传递给下一个孩子，而无需点击事件或任何其他事件（如滚动、悬停等）？我只是想提前通过它。我可以使用 mounted() 吗？

【问题讨论】：

相关：VueJs 2.0 emit event from grand child to his grand parent component

【参考方案1】：

是的！您正在寻找的是 $emit()，与 v-on directive 的组合，听起来您已经在使用这两者。

在您提到的子组件中，链中最低的一个，您已经从某个组件捕获click 事件，然后大概使用$emit('my-event', [...some data...]) 从子组件本身发出一个新事件.

你现在需要做的就是在链上的组件中添加事件监听器和处理程序，使用Vue的custom events mechanic，这样它们就可以接收和发出自己的事件，数据可以补足到父级.自定义事件允许您的组件发出和侦听任何名称的事件，这些事件可以携带他们想要的任何数据（这意味着它们不限于 click/ hover/ blur/ 等）。

这是该方法的分步说明：

（结构：Parent <--> Child #1 <--> Child #2 <--> Child #3）

子 #3 捕获 click 事件，并在其处理程序中发出事件 孩子 #2 正在 #3 上侦听此事件，捕获它，然后$emits 在其处理程序中自己的事件 孩子 #1 在 #2 上监听此事件，捕获它，并在其处理程序中发出自己的事件 父级捕获事件，并执行处理程序

---

在代码中，您的每个组件中都有一个侦听器和处理程序，如下所示：_{（为了简洁起见，我在这里使用了内联处理程序，但您可以使用已定义的方法作为处理程序，只需从方法中调用this.$emit(...)。）}

孩子 #3：

<component ... @click="$emit('my-event-a', $event)" />

孩子 #2：

<ChildComponent3 ... @my-event-a="$emit('my-event-b', $event)" />

1 号孩子：

<ChildComponent2 ... @my-event-b="$emit('my-event-c', $event)" />

家长：

<ChildComponent1 ... @my-event-c="myHandler" />

$event 这里只是 special Vue syntax 用于引用内联处理程序中的事件数据，在这种情况下，它允许您的新事件包含相同的数据。

各种子组件中的事件可以任意命名，只要确保各自的侦听器正在侦听正确的事件名称（例如，@event-x="..." 用于$emit('event-x') 和@pizza-eaten="..." 用于@987654346 @)。

我还想提一下，将event 对象（或任何数据）与发出的事件一起传递是完全可选的。为此，只需使用事件名称调用$emit，无需其他参数：$emit('my-event')。当您只是关心 一个事件已经发生并且处理程序不需要更多信息时，这很有用。

---

有很多方法可以解决这个问题，但这是最容易理解的方法，而且只要您不需要组件与其深度嵌套的子级之间的大量直接交互，它就可以很好地工作。

如果您确实发现您的组件结构变得越来越复杂，那么您可能需要研究一个完全实现的state management solution，例如Vuex，它允许您的组件与状态管理器交互而不必通过复杂的组件结构来处理大量事件。