【翻译】Vue.js中的组件间通信

原文链接

在现代的前端构架中，整个页面由多个小的组件组成。每个组件有单独的功能与UI。基于组件的架构使得整个应用的开发与维护变得简单。开发的时候，你可能会遇到组件之间需要共享数据的问题。这篇文章，我们将可能会学到许多组件之间通信的方式。

Vue.js组件之间通信有以下几种方式：

1. 父组件- >子组件 （用Props）

2. 子自建 -> 父组件 (用Events)

3. 任何组件之间 (用 Event Bus)

---

1. 父组件 -> 子组件：

这种类型的通信，通过在父组件中声明一个参数传递数据到子组件

父组件

可以从以上的代码看到。在子组件ChildComponent声明中增加了一个“message”参数。为了动态设置这个值，我们必须在参数前加“：”。

子组件

在子组件中，已经增加了一个“message”入参，类型为“String”。

属性props只提供了从父组件到子组件的单向通信。如果从子组件到父组件是不可能的。在父组件对message属性的任何改变，都会直接传递到子组件中。

如果当message值改变，想在子组件中调用一个方法该怎么做？

在上面的例子中，通过在“watch”属性里增加一个函数，在函数中调用已经声明的callMe()方法。这样做将会确保当message值改变的时候callMe()方法将会被调用。

---

2. 子组件 -> 父组件

事件Events将会确保从子组件到父组件的通信。

子组件

在“ChildComponent”中，我们触发了一个事件，该事件将会emit一个消息，并且它的父组件可以通过"v-on:"指令得到这个消息。

父组件

在事件中，参数是可选的。可以传递n个参数，当子组件触发“messageFromChild()”事件，“childMessageReceived()”函数将会被调用。

---

3. 在任何组件间通信：Event Bus

Event Bus 不会被父子关系所限制。你能够在任何组件之间分享信息。

Abc Component

在上面的AbcComponent中，我们触发了一个‘message_from_abc’事件并且传递了参数。参数在这里是可选的。任何其他组件都能够监听该事件。

Xyz Component

在XyzComponent组件中通过注册“message_from_abc”事件来监听。可以通过在mounted() callback中设置一个事件监听器。事件监听器的回调将会被调用当message_from_abc事件被触发。

giphy.com

或者，我们可以用Vuex来作为vue的状态管理工具。

---

在下一篇文章，再来介绍Vuex...