组件通信组件之间的耦合通过在组件之间传递消息并相互配合来完成相应的功能。 通过正确定义的接口尽可能地解除父子组件的绑定也很重要，它可以确保每个组件的代码都是在相对隔离的环境中编写和理解的，从而提高可维护性和可重用性。 组件之间的通信包括父子组件之间的通信以及组件和组件之间的通信。
父子组件间通信父子组件通讯:如果组件a在模板中使用组件b，则a称为b的父组件，b称为a的子组件。 父子组件通信包括将消息从父组件传播到子组件，以及通知父组件内部发生了什么情况的通信。
从父组件传递到子组件：从组件传递到子组件是使用" props "完成的。 传递的值可以是单个值或多个值，但是如果传递多个参数，建议以json数组{}的形式传递。
【示例】:单值传递，从父组件向子组件传递消息。 此消息显示在子组件中。 子部件的代码为templatedivclass=' active ' span { { v _ info } }/span//父部件的值/div/templatescriptexportdefault { 它用于检索从父组件传递的数据} /script用于在子组件定义的props属性v-info中接收从父组件传递的值。 子程序集使用props方法获取从父程序集传递的值。 父组件的使用代码如下：
templatedivclass=' alert-danger ' input type=' text ' v-model=' info '/v-child 3360 v _ info=' info/v-Chilo commpropschild ' export default { name : ' v-parent '， data (} return { info 3330 } components 3360 { v-child : v-child }/script是将父组件的data的info属性值传递给子组件的数据和HTML一样使用。使用props，不仅可以以json格式传递单个值，还可以以json格式传递数组和对象。 子组件使用props方法检索从父组件传递的值数据类型的使用情况。 不考虑数据类型时，保持props:[“v-age”、“v-adress”]即可。 在括号中包含多个值，用“，”分隔。 props还可以定义可接收的数据类型。 在这种情况下，如果接收到的数据不一致，则报告错误，也可以设定默认值。
【例】props传输数据类型
scriptexportdefault { props : } v-number : [ number，String]、 //限制v-number传输数据类型为number或String，如果数据类型不匹配，则报告错误的v-info336666 //v-info数据类型为stringv-info 2: { type : string required: true //使用组件时，v-info2为需要赋值的字符串}，v-info : { type 33660 } default : 100//v-info 3数据类型为数字v-info4: { type: Object， default3360function(/v-info4数据类型为具有目标默认值的对象return { message : ' hello ' } v-info 5: { validator 3360 function } //具体解决方案：将v-if=false添加到父组件需要传递数据的节点中，并获取数字
据后将v-if = true，进行数据传递。示例如下： //引入的add-widget组件 <add-widget :msg-val="msg" v-if='dataReady'> </add-widget> //这里dataReady的值是false，当获取完数据改为true，再给msg赋值<script> export default { data(){ return { msg: [1,2,3], dataReady:false }; methods{ getMsg(){ //执行提取数据 dataReady =true } } } </script> 子组件给父组件发消息。子组件向父组件传值是通过emit事件完成。在子组件中使用语法：$emit(‘watchMethod’, childValue) 其中参数watchMethod是在父组件on监听的方法，第二个参数this.childValue是需要传的值。
【示例】点击子组件的按钮，将子组件的消息数据传递给父组件
子组件代码如下：
子组件中“watchMethod”是子组件事件绑定接口方法的名称。
父组件代码如下
<template> <div class="alert-danger"> <span>{{childvalues}}</span> <appChild v-on: watchMethod="fatherMethod"></appChild> //子组件watchMethod事件中绑定父类中fatherMethod </div> </template> <script> import v-child from './commPropsChild' export default { name: "v-parent", data() { return { info: "我是父组件的值", childvalues: '' } }, methods: { fatherMethod: function(childValue) { // childValue就是子组件传过来的值 this.childvalues = childValue } }, components: { v-child: v-child } } </script>将父类组件的方法绑定到子类的定义的方法上，其参数就是子类给父类传递的信息。
小结在VUE组件开发中，体现了面向对象封装性，父子组件之间的通讯使用props和emit，通过简单属性和方法的定义父组件与子组件内部完全脱耦，使得二者之间的耦合变得简单明确。父组件和子组件通讯还包括provide / inject API、插槽、vuex、eventbus、localStorage、#refs等形式，在后续章节再做介绍。接下来我们兄弟组件之间的通讯。