Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

Vue.js 中使用 $emit 和 $on 进行兄弟组件通信

Vue.js 是一种流行的前端框架,它支持组件化编程,但是在组件之间传递数据时可能会遇到一些挑战。这篇文章将介绍如何使用 Vue.js 的 $emit 和 $on 方法来实现兄弟组件之间的数据传输通信。

兄弟组件之间的数据传输

在 Vue.js 中,每个组件都有自己的作用域和状态。这意味着,如果您想要在两个不同的组件之间传递数据,您需要采取一些额外的步骤。

一种常见的情况是,您在一个父组件中有两个子组件,您希望这两个子组件能够相互通信。在这种情况下,您可以使用 Vue.js 的事件系统来实现这一点。

使用 $emit 和 $on

Vue.js 提供了 $emit 和 $on 两个方法来处理组件之间的事件。$emit 方法用于触发自定义事件,而 $on 方法则用于监听自定义事件。

在我们的示例中,我们将创建两个子组件:Sender 和 Receiver。Sender 组件将向 Receiver 组件发送消息,Receiver 组件将接收该消息并显示在页面上。

Sender 组件

----------
  -----
    ------- ------------------------- ----------------
  ------
-----------

--------
------ ------- -
  -------- -
    ------------- -
      --------------------- ------ ---- ---------
    --
  --
--
---------

在这个组件中,我们创建了一个按钮,当用户点击该按钮时,会触发 sendMessage 方法。该方法使用 $emit 方法将一个名为 message 的自定义事件发送到父组件。

该事件包含一个字符串参数,即要发送的消息内容。在此示例中,我们发送了一条简单的消息:“Hello from Sender”。

Receiver 组件

----------
  -----
    ----------- -- ------- ------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      -------- ---
    --
  --
  --------- -
    ------------------- --------- -- -
      ------------ - --------
    ---
  --
--
---------

在这个组件中,我们定义了一个名为 message 的数据属性,并在页面上显示它。

接下来,在该组件的 created 生命周期钩子函数中,我们调用 $on 方法来监听名为 message 的自定义事件。当事件被触发时,通过向回调函数传递消息参数,我们将接收并更新该组件的消息状态。

父组件

在父组件中,我们只需要将这两个组件放在一起,并使用 v-model 指令来绑定 Receiver 组件的 message 数据属性:

----------
  -----
    ------- --
    --------- ----------------- --
  ------
-----------

--------
------ ------ ---- --------------------------
------ -------- ---- ----------------------------

------ ------- -
  ----------- -
    -------
    ---------
  --
  ------ -
    ------ -
      -------- ---
    --
  --
--
---------

在这个组件中,我们导入 Sender 和 Receiver 组件并将它们放在页面上。我们还定义了一个名为 message 的数据属性,并使用 v-model 指令将其与 Receiver 组件的 message 属性进行绑定。

现在,当用户在 Sender 组件中点击“Send Message”按钮时,消息将被发送到父组件。父组件再将该消息传递给 Receiver 组件,并显示在页面上。

总结

在 Vue.js 中,使用 $emit 和 $on 方法可以方便地实现兄弟组件之间的数据传输通信。通过向事件传递参数和监听事件回调函数,您可以在不同的组件之间传递信息并更新状态。

- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------