這篇文章介紹了Vue.js 父子組件之間通信的十種方式，不管是初學者還是已經在用 Vue 的開發者都會有所收穫。無可否認，現在無論大廠還是小廠都已經用上了 Vue.js 框架，簡單易上手不說，教程詳盡，社區活躍，第三方套件還多。真的是前端開發人員必備技能。而且在面試當中也往往會問到關於 Vue 方面... ...
這篇文章介紹了Vue.js 父子組件之間通信的十種方式，不管是初學者還是已經在用 Vue 的開發者都會有所收穫。無可否認，現在無論大廠還是小廠都已經用上了 Vue.js 框架，簡單易上手不說，教程詳盡，社區活躍，第三方套件還多。真的是前端開發人員必備技能。而且在面試當中也往往會問到關於 Vue 方面的各種問題，其中大部分面試官會問到如上這種問題。
概述
幾種通信方式無外乎以下幾種：
Prop（常用）$emit(組件封裝用的較多).sync語法糖 （較少）$attrs和$listeners(組件封裝用的較多)provide和inject（高階組件/組件庫用的較多）- 其他方式通信
詳述
下麵逐個介紹，大神請繞行。
1. Prop
英式發音：[prɒp]。這個在我們日常開發當中用到的非常多。簡單來說，我們可以通過 Prop 向子組件傳遞數據。用一個形象的比喻來說，父子組件之間的數據傳遞相當於自上而下的下水管子，只能從上往下流，不能逆流。這也正是 Vue 的設計理念之單向數據流。而 Prop 正是管道與管道之間的一個銜介面，這樣水（數據）才能往下流。說這麼多，看代碼：
<div id="app"> <child :content="message"></child> </div>
// Js
let Child = Vue.extend({
template: '<h2>{{ content }}</h2>',
props: {
content: {
type: String,
default: () => { return 'from child' }
}
}
})
new Vue({
el: '#app',
data: {
message: 'from parent'
},
components: {
Child
}
})
你可以狠狠的戳這裡查看Demo！瀏覽器輸出：
1 from parent
2. $emit
英式發音：[iˈmɪt]。官方說法是觸發當前實例上的事件。附加參數都會傳給監聽器回調。按照我的理解不知道能不能給大家說明白，先簡單看下代碼吧：
<div id="app"> <my-button @greet="sayHi"></my-button> </div>
let MyButton = Vue.extend({
template: '<button @click="triggerClick">click</button>',
data () {
return {
greeting: 'vue.js!'
}
},
methods: {
triggerClick () {
this.$emit('greet', this.greeting)
}
}
})
new Vue({
el: '#app',
components: {
MyButton
},
methods: {
sayHi (val) {
alert('Hi, ' + val) // 'Hi, vue.js!'
}
}
})
你可以狠狠的戳這裡查看Demo! 大致邏輯是醬嬸兒的：當我在頁面上點擊按鈕時，觸發了組件 MyButton 上的監聽事件 greet，並且把參數傳給了回調函數 sayHi 。說白了，當我們從子組件 Emit（派發） 一個事件之前，其內部都提前在事件隊列中 On（監聽）了這個事件及其監聽回調。其實相當於下麵這種寫法：
vm.$on('greet', function sayHi (val) {
console.log('Hi, ' + val)
}
vm.$emit('greet', 'vue.js')
// => "Hi, vue.js"
3. .sync 修飾符
這個家伙在 [email protected] 的時候曾作為雙向綁定功能存在，即子組件可以修改父組件中的值。因為它違反了單向數據流的設計理念，所以在 [email protected] 的時候被幹掉了。但是在 [email protected]+ 以上版本又重新引入了這個 .sync 修飾符。但是這次它只是作為一個編譯時的語法糖存在。它會被擴展為一個自動更新父組件屬性的 v-on 監聽器。說白了就是讓我們手動進行更新父組件中的值了，從而使數據改動來源更加的明顯。下麵引入自官方的一段話：
在有些情況下，我們可能需要對一個 prop 進行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源。
既然作為一個語法糖，肯定是某種寫法的簡寫形式，哪種寫法呢，看代碼：
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"> </text-document>
於是我們可以用 .sync 語法糖簡寫成如下形式：
<text-document v-bind:title.sync="doc.title"></text-document>
廢話這麼多，如何做到“雙向綁定” 呢？讓我們進段廣告，廣告之後更加精彩！ ... 好的，歡迎回來。假如我們想實現這樣一個效果：改變子組件文本框中的值同時改變父組件中的值。怎麼做？列位不妨先想想。先看段代碼：
let Login = Vue.extend({
template: `
<div class="input-group">
<label>姓名:</label>
<input v-model="text">
</div>
`,
props: ['name'],
data () {
return {
text: ''
}
},
watch: {
text (newVal) {
this.$emit('update:name', newVal)
}
}
})
new Vue({
el: '#app',
data: {
userName: ''
},
components: {
Login
}
})
你可以狠狠的戳這裡查看Demo!下麵劃重點，代碼里有這一句話：
this.$emit('update:name', newVal)
官方語法是：update:myPropName 其中 myPropName 表示要更新的 prop 值。當然如果你不用 .sync 語法糖使用上面的 .$emit 也能達到同樣的效果。僅此而已！
4. $attrs 和 $listeners
- 官網對
$attrs的解釋如下：
包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (
class和style除外)。當一個組件沒有聲明任何 prop 時，這裡會包含所有父作用域的綁定 (class和style除外)，並且可以通過v-bind="$attrs"傳入內部組件——在創建高級別的組件時非常有用。
- 官網對
$listeners的解釋如下：
包含了父作用域中的 (不含
.native修飾器的)v-on事件監聽器。它可以通過v-on="$listeners"傳入內部組件——在創建更高層次的組件時非常有用。
我覺得 $attrs 和 $listeners 屬性像兩個收納箱，一個負責收納屬性，一個負責收納事件，都是以對象的形式來保存數據。看下麵的代碼解釋：
<div id="app">
<child
:foo="foo"
:bar="bar"
@one.native="triggerOne"
@two="triggerTwo">
</child
</div>
從 Html 中可以看到，這裡有倆屬性和倆方法，區別是屬性一個是 prop 聲明，事件一個是 .native 修飾器。
let Child = Vue.extend({
template: '<h2>{{ foo }}</h2>',
props: ['foo'],
created () {
console.log(this.$attrs, this.$listeners)
// -> {bar: "parent bar"}
// -> {two: fn}
// 這裡我們訪問父組件中的 `triggerTwo` 方法
this.$listeners.two()
// -> 'two'
}
})
new Vue({
el: '#app',
data: {
foo: 'parent foo',
bar: 'parent bar'
},
components: {
Child
},
methods: {
triggerOne () {
alert('one')
},
triggerTwo () {
alert('two')
}
}
})
你可以狠狠的戳這裡查看Demo! 可以看到，我們可以通過 $attrs 和 $listeners 進行數據傳遞，在需要的地方進行調用和處理，還是很方便的。當然，我們還可以通過 v-on="$listeners" 一級級的往下傳遞，子子孫孫無窮盡也！
一個插曲！
當我們在組件上賦予了一個非Prop 聲明時，編譯之後的代碼會把這些個屬性都當成原始屬性對待，添加到 html 原生標簽上，看上面的代碼編譯之後的樣子：
<h2 bar="parent bar">parent foo</h2>
這樣會很難看，同時也爆了某些東西。如何去掉？這正是 inheritAttrs 屬性的用武之地！給組件加上這個屬性就行了，一般是配合 $attrs 使用。看代碼：
// 源碼
let Child = Vue.extend({
...
inheritAttrs: false, // 預設是 true
...
})
再次編譯：
<h2>parent foo</h2>
5. provide / inject
他倆是對CP, 感覺挺神秘的。來看下官方對 provide / inject 的描述：
provide和inject主要為高階插件/組件庫提供用例。並不推薦直接用於應用程式代碼中。並且這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代註入一個依賴，不論組件層次有多深，併在起上下游關係成立的時間里始終生效。
看完描述有點懵懵懂懂！一句話總結就是：小時候你老爸什麼東西都先幫你存著等你長大該娶媳婦兒了你要房子給你買要車給你買只要他有的儘量都會滿足你。下麵是這句話的代碼解釋：
<div id="app"> <son></son> </div>
let Son = Vue.extend({
template: '<h2>son</h2>',
inject: {
house: {
default: '沒房'
},
car: {
default: '沒車'
},
money: {
// 長大工作了雖然有點錢
// 僅供生活費，需要向父母要
default: '￥4500'
}
},
created () {
console.log(this.house, this.car, this.money)
// -> '房子', '車子', '￥10000'
}
})
new Vue({
el: '#app',
provide: {
house: '房子',
car: '車子',
money: '￥10000'
},
components: {
Son
}
})
你可以狠狠的戳這裡查看Demo!
6. 其他方式通信
除了以上五種方式外，其實還有：
- EventBus
思路就是聲明一個全局Vue實例變數 EventBus , 把所有的通信數據，事件監聽都存儲到這個變數上。這樣就達到在組件間數據共用了，有點類似於 Vuex。但這種方式只適用於極小的項目，複雜項目還是推薦 Vuex。下麵是實現 EventBus 的簡單代碼：
<div id="app"> <child></child> </div>
// 全局變數
let EventBus = new Vue()
// 子組件
let Child = Vue.extend({
template: '<h2>child</h2>',
created () {
console.log(EventBus.message)
// -> 'hello'
EventBus.$emit('received', 'from child')
}
})
new Vue({
el: '#app',
components: {
Child
},
created () {
// 變數保存
EventBus.message = 'hello'
// 事件監聽
EventBus.$on('received', function (val) {
console.log('received: '+ val)
// -> 'received: from child'
})
}
})
你可以狠狠的戳這裡查看Demo!
- Vuex
官方推薦的，Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。
- $parent
父實例，如果當前實例有的話。通過訪問父實例也能進行數據之間的交互，但極小情況下會直接修改父組件中的數據。
- $root
當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。通過訪問根組件也能進行數據之間的交互，但極小情況下會直接修改父組件中的數據。
- broadcast / dispatch
他倆是 [email protected] 中的方法，分別是事件廣播 和 事件派發。雖然 [email protected] 裡面刪掉了，但可以模擬這兩個方法。可以借鑒 Element 實現。有時候還是非常有用的，比如我們在開發樹形組件的時候等等。
《作者：gongph，鏈接：https://juejin.im/post/5bd18c72e51d455e3f6e4334》
