面試官：Vue 中父子組件通信有哪些方式？

自己先想一分鐘。

無(wú)可否認(rèn)，現(xiàn)在無(wú)論大廠還是小廠都已經(jīng)用上了Vue.js 框架，簡(jiǎn)單易上手不說(shuō)，教程詳盡，社區(qū)活躍，第三方套件還多。真的是前端開(kāi)發(fā)人員必備技能。而且在面試當(dāng)中也往往會(huì)問(wèn)到關(guān)于 Vue 方面的各種問(wèn)題，其中大部分面試官會(huì)問(wèn)到如上這種問(wèn)題。

最近一直在做 Vue項(xiàng)目代碼層面上的優(yōu)化，說(shuō)實(shí)話，優(yōu)化別人的代碼真是件痛苦的事情，功能實(shí)現(xiàn)尚且不說(shuō)，就說(shuō)代碼規(guī)范我就能再寫(xiě)出一篇文章來(lái)。真的是無(wú)規(guī)范不成方圓，規(guī)范這個(gè)東西太重要了！有點(diǎn)扯了，回到主題，咳咳，那就談?wù)勎覍?duì)上面的面試題的理解吧，文筆有限，不妥之處，歡迎在文章結(jié)尾留言斧正啊，正啊，??！

概述

幾種通信方式無(wú)外乎以下幾種：

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

詳述

下面逐個(gè)介紹，大神請(qǐng)繞行。

1. Prop

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

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

from parent

2. $emit

英式發(fā)音：[iˈmɪt]。官方說(shuō)法是 觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào) 。按照我的理解不知道能不能給大家說(shuō)明白，先簡(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! 大致邏輯是醬嬸兒的：當(dāng)我在頁(yè)面上點(diǎn)擊按鈕時(shí)，觸發(fā)了組件 MyButton 上的監(jiān)聽(tīng)事件 greet ，并且把參數(shù)傳給了回調(diào)函數(shù) sayHi 。說(shuō)白了，當(dāng)我們從子組件Emit（派發(fā)） 一個(gè)事件之前，其內(nèi)部都提前在事件隊(duì)列中On（監(jiān)聽(tīng)）了這個(gè)事件及其監(jiān)聽(tīng)回調(diào)。其實(shí)相當(dāng)于下面這種寫(xiě)法：

vm.$on('greet', function sayHi (val) {
 console.log('Hi, ' + val)
})
vm.$emit('greet', 'vue.js')
// => "Hi, vue.js"

3. .sync 修飾符

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

在有些情況下，我們可能需要對(duì)一個(gè) prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會(huì)帶來(lái)維護(hù)上的問(wèn)題，因?yàn)樽咏M件可以修改父組件，且在父組件和子組件都沒(méi)有明顯的改動(dòng)來(lái)源。

既然作為一個(gè)語(yǔ)法糖，肯定是某種寫(xiě)法的簡(jiǎn)寫(xiě)形式，哪種寫(xiě)法呢，看代碼：

<text-document
 v-bind:title="doc.title"
 v-on:update:title="doc.title = $event">
</text-document>

于是我們可以用 .sync 語(yǔ)法糖簡(jiǎn)寫(xiě)成如下形式：

<text-document v-bind:title.sync="doc.title"></text-document>

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

<div id="app">
 <login :name.sync="userName"></login> {{ userName }}
</div>

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!下面劃重點(diǎn)，代碼里有這一句話：

this.$emit('update:name', newVal)

官方語(yǔ)法是： update:myPropName 其中 myPropName 表示要更新的 prop 值。當(dāng)然如果你不用 .sync 語(yǔ)法糖使用上面的 .$emit 也能達(dá)到同樣的效果。僅此而已！

4. $attrs 和 $listeners

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

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

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

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

我覺(jué)得 $attrs 和 $listeners 屬性像兩個(gè)收納箱，一個(gè)負(fù)責(zé)收納屬性，一個(gè)負(fù)責(zé)收納事件，都是以對(duì)象的形式來(lái)保存數(shù)據(jù)。看下面的代碼解釋：

<div id="app">
 <child 
  :foo="foo" 
  :bar="bar"
  @one.native="triggerOne"
  @two="triggerTwo">
 </child>
</div>

從 Html 中可以看到，這里有倆屬性和倆方法，區(qū)別是屬性一個(gè)是 prop 聲明，事件一個(gè)是 .native 修飾器。

let Child = Vue.extend({
 template: '<h2>{{ foo }}</h2>',
 props: ['foo'],
 created () {
  console.log(this.$attrs, this.$listeners)
  // -> {bar: "parent bar"}
  // -> {two: fn}
  
  // 這里我們?cè)L問(wèn)父組件中的 `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! 可以看到，我們可以通過(guò) $attrs 和 $listeners 進(jìn)行數(shù)據(jù)傳遞，在需要的地方進(jìn)行調(diào)用和處理，還是很方便的。當(dāng)然，我們還可以通過(guò) v-on="$listeners" 一級(jí)級(jí)的往下傳遞，子子孫孫無(wú)窮盡也！

一個(gè)插曲！

當(dāng)我們?cè)诮M件上賦予了一個(gè)非Prop 聲明時(shí)，編譯之后的代碼會(huì)把這些個(gè)屬性都當(dāng)成原始屬性對(duì)待，添加到 html 原生標(biāo)簽上，看上面的代碼編譯之后的樣子：

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

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

// 源碼
let Child = Vue.extend({
 ...
 inheritAttrs: false, // 默認(rèn)是 true
 ...
})

再次編譯：

<h2>parent foo</h2>

5. provide / inject

他倆是對(duì)CP, 感覺(jué)挺神秘的。來(lái)看下官方對(duì)provide / inject 的描述：

provide 和 inject 主要為高階插件/組件庫(kù)提供用例。并不推薦直接用于應(yīng)用程序代碼中。并且這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

看完描述有點(diǎn)懵懵懂懂！一句話總結(jié)就是：小時(shí)候你老爸什么東西都先幫你存著等你長(zhǎng)大該娶媳婦兒了你要房子給你買(mǎi)要車(chē)給你買(mǎi)只要他有的盡量都會(huì)滿足你。下面是這句話的代碼解釋：

<div id="app">
 <son></son>
</div>

let Son = Vue.extend({
 template: '<h2>son</h2>',
 inject: {
  house: {
   default: '沒(méi)房'
  },
  car: {
   default: '沒(méi)車(chē)'
  },
  money: {
   // 長(zhǎng)大工作了雖然有點(diǎn)錢(qián)
   // 僅供生活費(fèi)，需要向父母要
   default: '￥4500'
  }
 },
 created () {
  console.log(this.house, this.car, this.money)
  // -> '房子', '車(chē)子', '￥10000'
 }
})

new Vue({
 el: '#app',
 provide: {
  house: '房子',
  car: '車(chē)子',
  money: '￥10000'
 },
 components: {
  Son
 }
})

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

6. 其他方式通信

除了以上五種方式外，其實(shí)還有：

EventBus

思路就是聲明一個(gè)全局Vue實(shí)例變量 EventBus , 把所有的通信數(shù)據(jù)，事件監(jiān)聽(tīng)都存儲(chǔ)到這個(gè)變量上。這樣就達(dá)到在組件間數(shù)據(jù)共享了，有點(diǎn)類似于Vuex。但這種方式只適用于極小的項(xiàng)目，復(fù)雜項(xiàng)目還是推薦 Vuex。下面是實(shí)現(xiàn) EventBus 的簡(jiǎn)單代碼：

<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)聽(tīng)
  EventBus.$on('received', function (val) {
   console.log('received: '+ val)
   // -> 'received: from child'
  })
 }
})

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

Vuex

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

$parent

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

$root

當(dāng)前組件樹(shù)的根 Vue 實(shí)例。如果當(dāng)前實(shí)例沒(méi)有父實(shí)例，此實(shí)例將會(huì)是其自己。通過(guò)訪問(wèn)根組件也能進(jìn)行數(shù)據(jù)之間的交互，但極小情況下會(huì)直接修改父組件中的數(shù)據(jù)。

broadcast / dispatch

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

總結(jié)

以上所述是小編給大家介紹的Vue.js 父子組件通信的十種方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！