组件之间除了保持独立之外，还需要相互通信，本章将介绍几种通信的方式。

一、直接访问

　　Vue提供了三个实例属性，可直接访问父组件、子组件和根实例，如下所列。

　　（1）$parent：父组件。

　　（2）$root：根实例，如果没有父实例，那么读取的将是自身。

　　（3）$children：直接子组件，无法获取隔代的子组件，并且不保证组件的顺序，也非响应式。

　　下面用一个示例来演示它们的用法，首先创建两个父子关系的组件parent和child；接着初始化根实例vm，挂载的<div>元素包含parent组件；最后为根实例和parent组件的数据对象添加name属性。

<div id="container">  <parent></parent></div><script>   Vue.component("child", {     template: '<p>子组件</p>',     mounted: function() {       this.$parent.name;      //"parent"      this.$root.name;        //"root"    }   });   Vue.component("parent", {     data: function() {       return {         name: "parent"       };     },     template: '<child></child>'   });   var vm = new Vue({     el: "#container",     data: {       name: "root"     }   });   vm.$children;            //[VueComponent]</script>

　　当执行vm.$children时，得到的是一个子组件数组。在child组件的mounted钩子中调用了实例的$parent和$root的name属性，其值分别是“parent”和“root”。

　　大部分情况下，应当避免直接修改组件的内部，因为这么做不仅让父子组件紧密耦合，而且还难以追踪是谁发起的变更。

二、ref和$refs

　　如果要直接访问子元素或子组件，那么除了使用上文的$children属性之外，还能通过ref特性配合$refs属性实现。

　　DOM元素或组件可通过声明ref特性来指定一个索引标识符，即注册引用信息。而父组件的$refs属性则记录了声明过ref特性的子元素和子组件，它的值是一个对象，其键就是ref特性的值。下面是一个简单的例子，注册了父组件parent和子组件child，并且为child组件和<input>元素分别声明了ref特性。

Vue.component("child", {   template: '<input ref="txt" />',   mounted: function() {     this.$refs;        //{txt: input}  } }); Vue.component("parent", {   template: '<child ref="child"></child>',   mounted: function() {     this.$refs;        //{child: VueComponent}  } });

　　在两个组件的mounted钩子中，读取了各自实例的$refs属性。如果要在parent组件中读取child组件的$refs属性，那么可以像下面这样。

this.$refs.child.$refs

　　注意，$refs不是响应式的，并且在渲染到页面之前是无法访问的，即不能在mounted之前的钩子中使用。

　　当ref特性与v-for指令配合时，引用的将是一个数组，如下所示。

Vue.component("child", {   data: function() {     return {       names: ["strick", "freedom"]     };   },   template: `<div>      <input v-for="item in names" ref="txt" />    </div>`,  mounted: function() {     this.$refs;     //{txt: [input, input]}  } });

三、自定义事件

　　组件支持自定义事件，并且能在子组件中触发该事件，从而实现组件之间的通信。假设有两个父子关系的组件parent和child，在child组件上声明了自定义的dot事件，而在<button>元素上添加了click事件，它们接收的事件处理程序都叫add，如下所示。

Vue.component("child", {   template: '<button @click="add">提交</button>',   methods: {     add: function() {       this.$emit("dot", 1, 2);     }   } }); Vue.component("parent", {   template: '<child @dot="add"></child>',   methods: {     add: function(left, right) {       console.log(left, right);        //1 2    }   } });

　　Vue提供的实例方法$emi