[[266702]]

面試官：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 修飾符

這個家伙在 vue@1.x 的時候曾作為雙向綁定功能存在，即子組件可以修改父組件中的值。

因為它違反了單向數據流的設計理念，所以在 vue@2.0 的時候被干掉了。

但是在 vue@2.3.0+ 以上版本又重新引入了這個 .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

他倆是 vue@1.0 中的方法，分別是事件廣播 和 事件派發。

雖然 vue@2.0 里面刪掉了，但可以模擬這兩個方法。

可以借鑒 Element 實現。

有時候還是非常有用的，比如我們在開發樹形組件的時候等等。

總結

啰嗦了這么多，希望看到的同學或多或少有點收獲吧。

不對的地方還請留言指正，不勝感激。

父子組件間的通信其實有很多種，就看你在哪些情況下去用。

不同場景不同對待。

前提是你要心中有數才行!

通過大神之路還有很遠，只要每天看看社區，看看文檔，寫寫Demo，每天進步一點點，總會有收獲的。