這篇文章介紹了Vue.js 父子組件之間通信的十種方式，不管是初學者還是已經(jīng)在用 Vue 的開發(fā)者都會有所收獲。無可否認，現(xiàn)在無論大廠還是小廠都已經(jīng)用上了 Vue.js 框架，簡單易上手不說，教程詳盡，社區(qū)活躍，第三方套件還多。真的是前端開發(fā)人員必備技能。而且在面試當中也往往會問到關于 Vue 方面的各種問題，其中大部分面試官會問到如上這種問題。

概述

幾種通信方式無外乎以下幾種：

• Prop（常用）
• $emit (組件封裝用的較多)
• .sync語法糖 （較少）
• $attrs 和 $listeners (組件封裝用的較多)
• provide 和 inject （高階組件/組件庫用的較多）
• 其他方式通信

詳述

下面逐個介紹，大神請繞行。

1. Prop

英式發(fā)音：[pr?p]。這個在我們日常開發(fā)當中用到的非常多。簡單來說，我們可以通過 Prop 向子組件傳遞數(shù)據(jù)。用一個形象的比喻來說，父子組件之間的數(shù)據(jù)傳遞相當于自上而下的下水管子，只能從上往下流，不能逆流。這也正是 Vue 的設計理念之單向數(shù)據(jù)流。而 Prop 正是管道與管道之間的一個銜接口，這樣水（數(shù)據(jù)）才能往下流。說這么多，看代碼：

<``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！瀏覽器輸出：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">1 from parent</pre>

2. $emit

英式發(fā)音：[i?m?t]。官方說法是觸發(fā)當前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調。按照我的理解不知道能不能給大家說明白，先簡單看下代碼吧：

<``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! 大致邏輯是醬嬸兒的：當我在頁面上點擊按鈕時，觸發(fā)了組件 MyButton 上的監(jiān)聽事件 greet，并且把參數(shù)傳給了回調函數(shù) sayHi 。說白了，當我們從子組件 Emit（派發(fā)） 一個事件之前，其內部都提前在事件隊列中 On（監(jiān)聽）了這個事件及其監(jiān)聽回調。其實相當于下面這種寫法：

vm.$on(``'greet'``, ``function sayHi (val) {

console.log(``'Hi, ' + val)

}

vm.$emit(``'greet'``, ``'vue.js'``)

// => "Hi, vue.js"

|

3. .sync 修飾符

這個家伙在 vue@1.x 的時候曾作為雙向綁定功能存在，即子組件可以修改父組件中的值。因為它違反了單向數(shù)據(jù)流的設計理念，所以在 vue@2.0 的時候被干掉了。但是在 vue@2.3.0+ 以上版本又重新引入了這個 .sync 修飾符。但是這次它只是作為一個編譯時的語法糖存在。它會被擴展為一個自動更新父組件屬性的 v-on 監(jiān)聽器。說白了就是讓我們手動進行更新父組件中的值了，從而使數(shù)據(jù)改動來源更加的明顯。下面引入自官方的一段話：

在有些情況下，我們可能需要對一個 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``>

|

廢話這么多，如何做到“雙向綁定” 呢？讓我們進段廣告，廣告之后更加精彩！ ... 好的，歡迎回來。假如我們想實現(xiàn)這樣一個效果：改變子組件文本框中的值同時改變父組件中的值。怎么做？列位不妨先想想。先看段代碼：

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

• 官網(wǎng)對 $attrs 的解釋如下：

包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內部組件——在創(chuàng)建高級別的組件時非常有用。

• 官網(wǎng)對 $listeners 的解釋如下：

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創(chuàng)建更高層次的組件時非常有用。

我覺得 $attrs 和 $listeners 屬性像兩個收納箱，一個負責收納屬性，一個負責收納事件，都是以對象的形式來保存數(shù)據(jù)?？聪旅娴拇a解釋：

<``div id="app">

<``child

:foo="foo"

:bar="bar"

@one.native="triggerOne"

@two="triggerTwo">

</``child

</div>

|

從 Html 中可以看到，這里有倆屬性和倆方法，區(qū)別是屬性一個是 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 進行數(shù)據(jù)傳遞，在需要的地方進行調用和處理，還是很方便的。當然，我們還可以通過 v-on="$listeners" 一級級的往下傳遞，子子孫孫無窮盡也！

一個插曲！

當我們在組件上賦予了一個非Prop 聲明時，編譯之后的代碼會把這些個屬性都當成原始屬性對待，添加到 html 原生標簽上，看上面的代碼編譯之后的樣子：

|

1

|

<``h2 bar="parent bar">parent foo</``h2``>

|

這樣會很難看，同時也爆了某些東西。如何去掉？這正是 inheritAttrs 屬性的用武之地！給組件加上這個屬性就行了，一般是配合 $attrs 使用。看代碼：

// 源碼

let Child = Vue.extend({

...

inheritAttrs: ``false``, ``// 默認是 true

...

})

|

再次編譯：

|

1

|

<``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 , 把所有的通信數(shù)據(jù)，事件監(jiān)聽都存儲到這個變量上。這樣就達到在組件間數(shù)據(jù)共享了，有點類似于 Vuex。但這種方式只適用于極小的項目，復雜項目還是推薦 Vuex。下面是實現(xiàn) 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'

// 事件監(jiān)聽

EventBus.$on(``'received'``, ``function (val) {

console.log(``'received: '``+ val)

// -> 'received: from child'

})

}

})

|

你可以狠狠的戳這里查看Demo!

• Vuex

官方推薦的，Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。

• $parent

父實例，如果當前實例有的話。通過訪問父實例也能進行數(shù)據(jù)之間的交互，但極小情況下會直接修改父組件中的數(shù)據(jù)。

• $root

當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。通過訪問根組件也能進行數(shù)據(jù)之間的交互，但極小情況下會直接修改父組件中的數(shù)據(jù)。

• broadcast / dispatch

他倆是 vue@1.0 中的方法，分別是事件廣播 和 事件派發(fā)。雖然 vue@2.0 里面刪掉了，但可以模擬這兩個方法?？梢越梃b Element 實現(xiàn)。有時候還是非常有用的，比如我們在開發(fā)樹形組件的時候等等。

《作者：gongph，鏈接：https://juejin.im/post/5bd18c72e51d455e3f6e4334》