使用Vue构建组件容易，但对于初学者要掌握Vue组件中的通讯还是有一定的难度。比如说，父组件如何向子组件通讯？子组件又是如何向父组件通讯？兄弟组件又是怎么通讯？这些方面都是有关于组件通讯相关的知识。而且掌握Vue组件之间的通讯方式还是掌握Vue组件的另一种能力。

在Vue中，Vue的组件自身就很棒，因为它可以帮助我们使用重用的代码片段，我们也可以使用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>来传递数据。

<!-- ParentCard.vue -->
<template>
    <div class="card">
        <div class="card-header">
            <h5 v-text="theCardTitle"></h5>
            <button @click="sendMessage" class="btn">给子组件发送一个消息</button>
        </div>
        <div class="card-body">
            <child-card :parentMessage="parentMessage"></child-card>
        </div>
    </div>
</template>

<script>
    import ChildCard from './ChildCard';

    export default {
        name: 'ParentCard',
        data: () => ({
            theCardTitle: '父组件',
            parentMessage: ''
        }),
        components: {
            ChildCard
        },
        methods: {
            sendMessage() {
                this.parentMessage = `<b>消息来自父组件：</b> (^_^)!!!`
            }
        }
    }
</script>

子组件使用props对象

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

<!-- ChildCard.vue -->
<template>
    <div class="message">
        <div class="message-header">
            <h5 v-text="theCardTitle"></h5>
        </div>
        <div class="message-body">
            <p class="message-text" v-html="theCardBody"></p>
            <div v-if="parentMessage" class="alert" v-html="parentMessage"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ChildCard',
        props: ['parentMessage'],
        data: () => ({
            theCardTitle: '子组件',
            theCardBody: '我是一个子组件！(^_^) !!!'
        })
    }
</script>

上面的两小节中，分别创建了ParentCard和ChildCard两个组件，而且子组件ChildCard嵌套在父组件ParentCard中。在子组件中，使用了v-if指令有条件地显示来自父组件ParentCard的消息，并且显示在div.alert中。如果没有消息，则不会显示.alert。因此，当页面首次渲染时，parentMessage的初始值是一个空字符串（在ParentCard组件的data中设置了parentMessage为空字符串）。所以我们一开始渲染页面的时候，并看不到（ChildCard子组件不显示.alert）。当用户点击了ParentCard组件中的“发送消息”的按钮时，则会触发ParentCard组件中定义的sendMessage()方法。这个时候，parentMessage的值就变成了<b>消息来自父组件：</b> (^_^)!!!。由于此变量使用:parentMessage="parentMessage"绑定到<child-card>标签上，并且子组件ChildCard通过props:['parentMessage']接受该值，如此一来，子组件将使用来自父组件的parentMessage的值。

最终效果如下：

当你点击示例中右上角的按钮，就可以看到父组件向子组件发送的消息，这样就完成了父组件向子组件的数据通讯：

简单的总结一下：

在Vue中，父组件向子组件传递数据（通讯），可以借助props属性完成。

可以用一张类似下面这样的图来描述父组件向子组件通讯的关系：

子组件向父组件通讯

事实除了从父组件向子组件传数