vue.js - 在没有点击事件的情况下使用 $emit

Question

我是 Vue 的新手，有些事情我还不明白。

在第一个 child 中有一个点击事件来向下一个 child 发送信息。但是在另一个，第二个 child 中，无论如何使用 $emit 将信息传递给下一个 child 而没有点击事件或任何其他事件(如滚动、悬停等)？我只是想提前传递它。我可以用安装() ?

Answer 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)

child #3 捕捉到一个 click事件，并在其处理程序中发出事件

child #2 正在监听 #3 上的这个事件，捕获它，然后 $emit在其处理程序中拥有自己的事件

子 #1 正在监听 #2 上的此事件，捕获它，并在其处理程序中发出自己的事件

父捕获事件，并执行处理程序

在代码中，您将在每个组件中都有一个监听器和处理程序，它们可能如下所示:
(为了简洁起见，我在这里使用了内联处理程序，但您也可以使用定义的方法作为处理程序，只需从方法中调用 this.$emit(...)。)
child #3:

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

child #2:

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

child #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="..." 表示 $emit('pizza-eaten') )。
我还想提一下，通过 event具有发出事件的对象(或任何数据)是完全可选的。为此，只需调用 $emit带有事件名称且没有其他参数: $emit('my-event') .当您只关心发生了事件并且处理程序不需要更多信息时，这很有用。

有很多方法可以解决这个问题，但这是最容易理解的方法，并且只要您不需要组件与其深层嵌套的子组件之间的大量直接交互，就可以很好地工作。
如果您确实发现您的组件结构变得越来越复杂，那么您可能需要查看一个完全实现的 state management solution , 喜欢 Vuex ，它允许您的组件与状态管理器交互，而不必通过复杂的组件结构处理大量事件。