Vue.js 父子元件通訊的1212種方式

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

自己先想一分鐘。

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

最近一直在做 Vue專案程式碼層面上的優化，說實話，優化別人的程式碼真是件痛苦的事情，功能實現尚且不說，就說程式碼規範我就能再寫出一篇文章來。真的是無規範不成方圓，規範這個東西太重要了！有點扯了，回到主題，咳咳，那就談談我對上面的面試題的理解吧，文筆有限，不妥之處，歡迎在文章結尾留言斧正啊，正啊，啊！

清單

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

• Prop（常用）
• $emit (元件封裝用的較多)
• .sync語法糖 （較少）
• $attrs & $listeners (元件封裝用的較多)
• provide & inject （高階元件/元件庫用的較多）
• slot-scope & v-slot （vue@2.6.0+）新增
• scopedSlots 屬性
• 其他方式通訊

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

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

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 修飾符

這個傢伙在 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
  }
})
複製程式碼

你可以狠狠的戳這裡檢視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. slot-scope & v-slot

關於這種方式的介紹，請看我這篇文章的介紹。傳送門->

7. scopedSlots 屬性

關於這種方式的介紹，請看我這篇文章的介紹。傳送門->

8. 其他方式通訊

除了以上五種方式外，其實還有：

• 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

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

總結

囉嗦了這麼多，希望看到的同學或多或少有點收穫吧。不對的地方還請留言指正，不勝感激。父子元件間的通訊其實有很多種，就看你在哪些情況下去用。不同場景不同對待。前提是你要心中有數才行！通過大神之路還有很遠，只要每天看看社群，看看文件，寫寫Demo，每天進步一點點，總會有收穫的。俗話說，三人行則必有我師，希望更多志同道合的小夥伴能聚在一起交流技術！下面的群快滿了，可以加我 Q1769617251 。備註 vue 即可。