&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 等。