&emsp;&emsp;组件之间除了保持独立之外，还需要相互通信，本章将介绍几种通信的方式。 ## 一、直接访问 &emsp;&emsp;Vue提供了三个实例属性，可直接访问父组件、子组件和根实例，如下所列。 &emsp;&emsp;（1）$parent：父组件。 &emsp;&emsp;（2）$root：根实例，如果没有父实例，那么读取的将是自身。 &emsp;&emsp;（3）$children：直接子组件，无法获取隔代的子组件，并且不保证组件的顺序，也非响应式。 &emsp;&emsp;下面用一个示例来演示它们的用法，首先创建两个父子关系的组件parent和child；接着初始化根实例vm，挂载的\<div>元素包含parent组件；最后为根实例和parent组件的数据对象添加name属性。 ~~~html <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> ~~~ &emsp;&emsp;当执行vm.$children时，得到的是一个子组件数组。在child组件的mounted钩子中调用了实例的$parent和$root的name属性，其值分别是“parent”和“root”。 &emsp;&emsp;大部分情况下，应当避免直接修改组件的内部，因为这么做不仅让父子组件紧密耦合，而且还难以追踪是谁发起的变更。 ## 二、ref和$refs &emsp;&emsp;如果要直接访问子元素或子组件，那么除了使用上文的$children属性之外，还能通过ref特性配合$refs属性实现。 &emsp;&emsp;DOM元素或组件可通过声明ref特性来指定一个索引标识符，即注册引用信息。而父组件的$refs属性则记录了声明过ref特性的子元素和子组件，它的值是一个对象，其键就是ref特性的值。下面是一个简单的例子，注册了父组件parent和子组件child，并且为child组件和\<input>元素分别声明了ref特性。 ~~~js 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} } }); ~~~ &emsp;&emsp;在两个组件的mounted钩子中，读取了各自实例的$refs属性。如果要在parent组件中读取child组件的$refs属性，那么可以像下面这样。 ~~~js this.$refs.child.$refs ~~~ &emsp;&emsp;注意，$refs不是响应式的，并且在渲染到页面之前是无法访问的，即不能在mounted之前的钩子中使用。 &emsp;&emsp;当ref特性与v-for指令配合时，引用的将是一个数组，如下所示。 ~~~js 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]} } }); ~~~ ## 三、自定义事件 &emsp;&emsp;组件支持自定义事件，并且能在子组件中触发该事件，从而实现组件之间的通信。假设有两个父子关系的组件parent和child，在child组件上声明了自定义的dot事件，而在\<button>元素上添加了click事件，它们接收的事件处理程序都叫add，如下所示。 ~~~js 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 } } }); ~~~ &emsp;&emsp;Vue提供的实例方法$emit()，它的第一个参数是要触发的事件名称，其余参数都将回传给该事件的处理程序。在子组件child的add()方法中向$emit()传递了三个参数（“dot”、1和2），父组件parent中的add()方法能接收从子组件传递过来的两个数值（1和2）。 &emsp;&emsp;注意，自定义的事件名称不要用驼峰的命名方式，因为它没有等价的连字符分隔式的名称，例如下面的addNumber和add-number是两个事件。 ~~~html <child @addNumber="handle"></child> <!-- 不同 --> <child @add-number="handle"></child> ~~~ &emsp;&emsp;在DOM模板中，由于事件名称会被自动转换为小写，因此像下面这样调用addNumber事件将会失败。但在字符串模板中不会受其影响，依然能调用成功。 ~~~js this.$emit("addNumber"); ~~~ **1）v-model** &emsp;&emsp;组件也支持v-model指令，但需要做些配置。默认情况下，组件的v-model只监听value特性的变化以及input事件。如果要定制，那么可以使用model选项，并且需要在props中添加要监听的特性。下面注册一个checkbox组件，并让它的v-model指令关联模板内的复选框的checked特性和change事件。 ~~~js Vue.component("checkbox", { model: { prop: "checked", event: "change" }, props: { checked: Boolean }, template: '<input type="checkbox" :checked="checked" @change="dot" />', methods: { dot: function(e) { console.log(e.target.checked); } } }); ~~~ &emsp;&emsp;在将v-model作用于checkbox组件上后（如下所示），每次点击渲染出的复选框，就会在控制台输出当前的选中状态。 ~~~html <div id="container"> <checkbox v-model="current"></checkbox> </div> <script> var vm = new Vue({ el: "#container", data: { current: true } }); </script> ~~~ ***** > 原文出处： [博客园-Vue躬行记](https://www.cnblogs.com/strick/category/1512864.html) [知乎专栏-Vue躬行记](https://zhuanlan.zhihu.com/pwvue) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。