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

自己先想一分鐘。

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

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

概述

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

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

詳述

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

1. Prop

英式發(fā)音：[prɒp]。這個(gè)在我們?nèi)粘ｉ_發(fā)當(dāng)中用到的非常多。簡單來說， 我們可以通過Prop 向子組件傳遞數(shù)據(jù) 。用一個(gè)形象的比喻來說，父子組件之間的數(shù)據(jù)傳遞相當(dāng)于自上而下的下水管子，只能從上往下流，不能逆流。這也正是 Vue 的設(shè)計(jì)理念之單向數(shù)據(jù)流。而 Prop 正是管道與管道之間的一個(gè)銜接口，這樣水（數(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！瀏覽器輸出：

from parent

2. $emit

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

<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)我在頁面上點(diǎn)擊按鈕時(shí)，觸發(fā)了組件 MyButton 上的監(jiān)聽事件 greet ，并且把參數(shù)傳給了回調(diào)函數(shù) sayHi 。說白了，當(dāng)我們從子組件Emit（派發(fā)） 一個(gè)事件之前，其內(nèi)部都提前在事件隊(duì)列中On（監(jiān)聽）了這個(gè)事件及其監(jiān)聽回調(diào)。其實(shí)相當(dāng)于下面這種寫法：

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í)的語法糖存在。它會(huì)被擴(kuò)展為一個(gè)自動(dòng)更新父組件屬性的 v-on 監(jiān)聽器。說白了就是讓我們手動(dòng)進(jìn)行更新父組件中的值了，從而使數(shù)據(jù)改動(dòng)來源更加的明顯。下面引入自官方的一段話：

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

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

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

廢話這么多，如何做到“雙向綁定” 呢？讓我們進(jìn)段廣告，廣告之后更加精彩！ ... 好的，歡迎回來。假如我們想實(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)

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

4. $attrs 和 $listeners

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

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

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

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

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

<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}
  
  // 這里我們訪問父組件中的 `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 進(jìn)行數(shù)據(jù)傳遞，在需要的地方進(jìn)行調(diào)用和處理，還是很方便的。當(dāng)然，我們還可以通過 v-on="$listeners" 一級(jí)級(jí)的往下傳遞，子子孫孫無窮盡也！

一個(gè)插曲！

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

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

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

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

再次編譯：

<h2>parent foo</h2>

5. provide / inject

他倆是對CP, 感覺挺神秘的。來看下官方對provide / inject 的描述：

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

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

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

let Son = Vue.extend({
 template: '<h2>son</h2>',
 inject: {
  house: {
   default: '沒房'
  },
  car: {
   default: '沒車'
  },
  money: {
   // 長大工作了雖然有點(diǎn)錢
   // 僅供生活費(fèi)，需要向父母要
   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. 其他方式通信

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

EventBus

思路就是聲明一個(gè)全局Vue實(shí)例變量 EventBus , 把所有的通信數(shù)據(jù)，事件監(jiān)聽都存儲(chǔ)到這個(gè)變量上。這樣就達(dá)到在組件間數(shù)據(jù)共享了，有點(diǎn)類似于Vuex。但這種方式只適用于極小的項(xiàng)目，復(fù)雜項(xiàng)目還是推薦 Vuex。下面是實(shí)現(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 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。

$parent

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

$root

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

broadcast / dispatch

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

總結(jié)

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

最新評(píng)論