Vue 父子组件之间的通信

Vue组件之间的通信，对于初学者来说还是有一定的难度。比如说，作为父组件我怎么给子组件发消息，作为子组件又怎么给父组件传递消息，以及在同一个父组件下作为兄弟怎么进行通信

在Vue中，Vue的组件给我们开发带了极大的好处，因为组件可以复用，在项项目中我们在大致相同的地方可以果断选择使用一个组件进行复用，假如我们使用组件，那么组件间的通信就成为了你必须要了解的点。在接下来的内容中，我就带大家一起去实现组件之间的通信是怎么实现的，第一个部分是父子组件怎么通讯；第二部分兄弟组件怎么通讯（我会在下一篇给大家讲解）。

父子组件之间的通信

简而言之就是，父组件怎么给自己的儿子发送消息，儿子又怎么给自己的爹去发消息

父组件给子组件发消息

子组件

将数据从父组件传到子组件，我们一般是通过 props来实现。props指的是从外部设置的属性。需要在子组件的Vue对象中设置props属性，去接收来自父组件的消息。注意 :props是单向通讯，一般情况我们是只用来接收父组件的值，不会再子组件去对props进行修改，不然当父组件重新渲染时，该值会被覆盖。

父组件

那么父组件要怎么将数据传给子组件呢？首先我们在父组件中设置一个属性
，这个属性名要和子组件prop所接收的值一样。如下代码所示就是我们在
父组件中在子组件标签绑定parentMessage属性，属性值Message则是父组件需要发送给子组件的数据。然后在子组件中使用prop来接收parentMessage的值
props: {
parentMessage: {
type: String,
default () {
return ‘’
}
}
},

// 父组件
<template>
<div class="workload-sta">
<portal to="title">工作量统计</portal>
<div class="card">
<div class="card-header">
<h5 v-text="theCardTitle"></h5>
<button @click="sendMessage" class="btn">给儿子发命令</button>
</div>
<div class="card-body">
<son-card :parentMessage="Message"></son-card>
</div>
</div>

</div>
</template>
<script>
import sonCard from './sonCard';
export default {
name: 'workload-statistics',
data () {
return {
theCardTitle: '我是爹',
Message: ''

}
},
components: {
sonCard
},
created() {
},
methods: {
sendMessage() {
this.Message = `<b>老爸叫我别打lol了，去写作业：</b> (^_^)!!!`
}

}
}

// 子组件
<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: 'ChildSon',
props: {
parentMessage: {
type: String,
default () {
return ''
}
}
},
data () {
return {
theCardTitle: '儿子',
theCardBody: '我在打lol！(^_^) !!!'
}
}
}
</script>

上面的代码中，我分别创建了父组件和子组件。在子组件中，假如父组件发来了消息那么在子组件就会显示出来（v-if）。如果没有消息，则不会显示因此，我是通过父组件的按钮来触发消息发送。所以页面首次渲染时，parentMessage的初始值Message是一个空字符串。所以一开始儿子是在打lol。当我们点击父组件中的“发送消息”的按钮时，则会触发组件中定义的sendMessage()方法。parentMessage的值Message就变成了老爸叫我别打lol了，去写作业： (_)!!!。父组件则通过:parentMessage="Message"绑定到标签上，子组件ChildCard通过props接受该值。我们一起来看下效果
初始状态：

点击按钮，父组件向子组件发送的消息，这样就完成了父组件向子组件的数据通讯：

子组件给父组件发送消息

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

子组件发出自定义事件

首先在子组件的中添加按钮。在按钮添加一个click事件触发子组件定义的事件

当我们点击“给蝶回复消息”按钮时，运行toPrant()方法。触发事件时发出（emit）自定义的事件。我们将一个finished字符串传递给emit）自定义的事件。我们将一个finished字符串传递给emit）自定义的事件。我们将一个finished字符串传递给emit函数,后面this.toPrantMessage为finished具体的值。

父组件侦听自定义事件

回到父组件中，在父组件中使用自定义标签调用子组件ChildSon，在这个标签中我们可以使用@finished="comeSon"侦听子组件中自定义的事件。这意味着我们需要在父组件中定义一个comeSon(val)方法。父组件中定制了自定义属性的侦听器和触发它的方法,而comeSon方法参数val为子组件传来的具体的值

接下来我们还是看下效果，初始状态：

点击按钮，子组件向父组件发送的消息，这样就完成了子组件向父组件的数据通讯：

现在我们知道如何通过props实现父组件向子组件之间的通讯以及如何通过自定义事件完成子组件向父组件之间的通讯了吧。除了这两种之外，还有另外一种情形，那就是兄弟之间的组件如何进行数据通讯了，欲知后事如何，请听下回分解