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

自己先想一分鐘。

無可否認，現在無論大廠還是小廠都已經用上了 Vue.js 框架，簡單易上手不說，教程詳盡，社區活躍，第三方套件還多。真的是前端開發人員必備技能。而且在面試當中也往往會問到關於 Vue 方面的各種問題，其中大部分面試官會問到如上這種問題。

最近一直在做 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

  }

})

瀏覽器輸出：

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!'

    }

  }

})

大致邏輯是醬嬸兒的：當我在頁面上點擊按鈕時，觸發了組件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>

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

<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

  }

})

下面劃重點，代碼裏有這一句話：

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')

    }

  }

})

可以看到，我們可以通過$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

  }

})

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'

    })

  }

})

• Vuex

官方推薦的，Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。

• $parent

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

• $root

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

• broadcast / dispatch

他倆是 [email protected] 中的方法，分別是事件廣播 和 事件派發。雖然 [email protected] 裏面刪掉了，但可以模擬這兩個方法。可以借鑑 Element 實現。有時候還是非常有用的，比如我們在開發樹形組件的時候等等。

總結

囉嗦了這麼多，希望看到的同學或多或少有點收穫吧。不對的地方還請留言指正，不勝感激。父子組件間的通信其實有很多種，就看你在哪些情況下去用。不同場景不同對待。前提是你要心中有數才行！通過大神之路還有很遠，只要每天看看社區，看看文檔，寫寫Demo，每天進步一點點，總會有收穫的。

 

本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同學，歡迎加入Q羣：943129070，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。 最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。