淘先锋技术网

首页 1 2 3 4 5 6 7

原文链接

在现代的前端构架中,整个页面由多个小的组件组成。每个组件有单独的功能与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...