Vue非父子组件通信详解

深入了解Vue非父子组件通信的奥秘

在Vue中，组件是核心部分，而组件间的通信更是基础开发需求。对于父子组件间的通信，Vue文档给出了清晰的说明。对于非父子组件间的通信，文档中的描述相对简略。本文将详细介绍如何实现非父子组件间的通信，并给出一个简单的实例。

我们先来观察一个简单的通信效果：在一个组件被点击时，另一个组件的数字会递增。

HTML结构如下：

```html

```

接下来，我们逐步了解如何实现每一个组件的功能。

我们需要创建一个空的Vue实例作为事件的中转站。我们可以将其命名为“bus”。

对于组件A，我们定义了一个模板，并在模板中添加了一个按钮。当按钮被点击时，会触发一个名为“incrementB”的方法。组件A的数据中只有一个名为“masgA”的属性。

在组件A的方法中，我们定义了“incrementB”方法。在该方法中，我们通过bus（即中转站）触发了一个名为“incrementB”的事件。

在组件A的挂载阶段（mounted钩子函数中），我们监听了名为“incrementA”的事件。当该事件被触发时，会执行一个函数，使组件A的“masgA”属性递增。这个事件最终将由组件B进行触发。

对于组件B，我们没有给出具体的代码，但可以想象，在某个操作发生时（例如点击按钮），它会触发“incrementA”事件。这样，组件A就会监听到这个事件，并更新其数据。由于组件A和组件B之间并没有直接的父子关系，这种通信方式就是通过中转站bus实现的。通过这种方式，我们可以实现非父子组件间的通信。需要注意的是，在实际开发中，我们可以根据具体需求对代码进行优化和调整。例如，可以使用箭头函数来简化代码，避免使用额外的变量等。希望这个例子能够帮助你更好地理解Vue中非父子组件间的通信方式。