Vue组件通信

父组件向子组件通讯

要在Vue中将数据从父组件传到子组件，我们可以通过 **props**来实现。在React中也是使用类似的约定来实现组件之间的数据共享。props指的是从外部设置的属性，例如来自父组件。为了告诉Vue子组件从自已实例的外部接收数据，需要在子组件的Vue对象中设置props属性。这个属性包含一个String数组，每个字符串表示一个可以从父组件设置的属性。请注意，props严格用于父组件与子组件之间的单向通讯，并且你不希望尝试直接在子组件中更改props的值。否则，你将收到类似这样的错误信息“避免直接修改某个prop，因为当父组件重新渲染时，该值将被覆盖” 这样的错误。相反，根据prop的值使用data或computed。

父组件使用属性绑定

为了将数据从父组件传到子组件，在父组件中设置一个属性，该属性绑定和子组件的prop相同的名称一个属性值。请注意，我们现在位于父组件内部，但是我们使用了自定义标签<child-card>来渲染子组件。在这个标记上，我们设置了绑定属性。在下面的示例中，使用parentMessage作为属性名，所以在子组件中需要一个props: ['parentMessage']作为一个prop。然后在父组件中，使用<child-card :parentMessage = "parentMessage"></child-card>来传递数据。

子组件使用props对象

接下来的代码中，创建一个ChildCard子组件，它的data中有一个props数组，并且设置了一个parentMessage字符串。这表明parentMessage可以从外部设置，也可以从父组件设置。这正是我们在上一节中所做的。为prop提供的字符串名称，在我们的示例中，parentMessage必须与此组件中模板部分中使用的属性名相匹配。

子组件向父组件通讯

事实除了从父组件向子组件传数据之外，有时候也要能从子组件向父组件传数据。那么问题来了，在Vue中如何从子组件向父组件传数据（通讯）？在Vue中要实现这个，我们可以在子组件中发出自定义事件，并在父组件中侦听发出的事件（子组件中自定义的事件）。我们在上面的示例上来做一些更改，完成一个子组件向父组件通讯的示例。

子组件发出自定义事件

首先在子组件ChildCard的<template>中添加一个新的标签button。在这个button添加一个click事件： 父组件侦听自定义事件

我们可以回到父组件ParentCard中，在父组件中使用自定义标签``调用子组件ChildCard，在这个标签中我们可以使用@finished="finished"侦听子组件中自定义的事件。这意味着我们需要在父组件中定义一个finished()方法。父组件中定制了自定义属性的侦听器和触发它的方法。

兄弟组件通讯

在Vue中实现兄弟组件的通讯也有几种方法，其中一种方法是让父组件允当两个子组件之间的中间件（中继）；另一种就是使用EventBus（事件总线），它允许两个子组件之间直接通讯，而不需要涉及父组件。

通过父组件进行兄弟组件之间通讯

先来看第一个方法，就是让兄弟组件通过一个共同的父组件彼此通讯。

我们还是通过示例来学习。接下来的这个示例包含父组件和两个子组件，这两个子组件是兄弟组件。单击兄弟组件上的按钮，可以看到他们之间可以相互通讯。

通过EventBus进行兄弟间组件通讯

随着应用程序越来越庞大，通过父组件来传递所有内容会把事情变得越来越棘手。不过我们还有另一种选择，那就是使用EventBus架起兄弟之间通讯的桥梁。接下来看看我们是如何利用这一点一完成兄弟组件之间的数据通讯。

总结

在本教程中，我们学习了在Vue中如何实现组件之间的通讯。通过实例看到了如何实现父组件向子组件，子组件向父组件以及兄弟组件间的数据通讯。简单的根据为：

• 通过props可以实现父组件向子组件发送数据
• 通过自定义事件可以实现子组件向父组件发送数据
• 兄弟组件数据通讯除了借助共同的父组件做为通讯桥梁之外，还可以通过eventBus来让兄弟之间组件进行数据通讯