組件的通信 1：provide / inject

上一節(jié)中我們說(shuō)到，ref 和 $parent / $children 在跨級(jí)通信時(shí)是有弊端的链瓦。當(dāng)組件 A 和組件 B 中間隔了數(shù)代（甚至不確定具體級(jí)別）時(shí)姆怪，以往會(huì)借助 Vuex 或 Bus 這樣的解決方案，不得不引入三方庫(kù)來(lái)支持澡绩。本小節(jié)則介紹一種無(wú)依賴的組件通信方法：Vue.js 內(nèi)置的 provide / inject 接口稽揭。

什么是 provide / inject

provide / inject 是 Vue.js 2.2.0 版本后新增的 API，在文檔中這樣介紹 ：

https://cn.vuejs.org/v2/api/#provide-inject

這對(duì)選項(xiàng)需要一起使用肥卡，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴溪掀，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效步鉴。如果你熟悉 React揪胃，這與 React 的上下文特性很相似璃哟。

并且文檔中有如下提示：

provide 和 inject 主要為高階插件/組件庫(kù)提供用例。并不推薦直接用于應(yīng)用程序代碼中喊递。

看不懂上面的介紹沒(méi)有關(guān)系随闪，不過(guò)上面的這句提示應(yīng)該明白，就是說(shuō) Vue.js 不建議在業(yè)務(wù)中使用這對(duì) API骚勘，而是在插件 / 組件庫(kù)（比如 iView铐伴，事實(shí)上 iView 的很多組件都在用）。不過(guò)建議歸建議俏讹，如果你用好了当宴，這個(gè) API 會(huì)非常有用。

我們先來(lái)看一下這個(gè) API 怎么用泽疆，假設(shè)有兩個(gè)組件： A.vue 和 B.vue户矢，B 是 A 的子組件。

// A.vue
export default {
  provide: {
    name: 'Aresn'
  }
}

// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // Aresn
  }
}

可以看到殉疼，在 A.vue 里梯浪，我們?cè)O(shè)置了一個(gè) provide: name，值為 Aresn瓢娜，它的作用就是將 name 這個(gè)變量提供給它的所有子組件驱证。而在 B.vue 中，通過(guò) inject 注入了從 A 組件中提供的 name 變量恋腕，那么在組件 B 中抹锄，就可以直接通過(guò) this.name 訪問(wèn)這個(gè)變量了，它的值也是 Aresn荠藤。這就是 provide / inject API 最核心的用法伙单。

需要注意的是：

provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的哈肖。然而吻育，如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的淤井。

所以布疼，上面 A.vue 的 name 如果改變了，B.vue 的 this.name 是不會(huì)改變的币狠，仍然是 Aresn游两。

替代 Vuex

我們知道，在做 Vue 大型項(xiàng)目時(shí)漩绵，可以使用 Vuex 做狀態(tài)管理贱案，它是一個(gè)專為 Vue.js 開(kāi)發(fā)的狀態(tài)管理模式，用于集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)止吐，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化宝踪。

那了解了 provide / inject 的用法侨糟，下面來(lái)看怎樣替代 Vuex。當(dāng)然瘩燥，我們的目的并不是為了替代 Vuex秕重，它還是有相當(dāng)大的用處，這里只是介紹另一種可行性厉膀。

使用 Vuex溶耘，最主要的目的是跨組件通信、全局?jǐn)?shù)據(jù)維護(hù)站蝠、多人協(xié)同開(kāi)發(fā)汰具。需求比如有：用戶的登錄信息維護(hù)卓鹿、通知信息維護(hù)等全局的狀態(tài)和數(shù)據(jù)菱魔。

一般在 webpack 中使用 Vue.js，都會(huì)有一個(gè)入口文件 main.js吟孙，里面通常導(dǎo)入了 Vue澜倦、VueRouter、iView 等庫(kù)杰妓，通常也會(huì)導(dǎo)入一個(gè)入口組件 app.vue 作為根組件藻治。一個(gè)簡(jiǎn)單的 app.vue 可能只有以下代碼：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {

  }
</script>

使用 provide / inject 替代 Vuex，就是在這個(gè) app.vue 文件上做文章巷挥。

我們把 app.vue 理解為一個(gè)最外層的根組件桩卵，用來(lái)存儲(chǔ)所有需要的全局?jǐn)?shù)據(jù)和狀態(tài)，甚至是計(jì)算屬性（computed）倍宾、方法（methods）等雏节。因?yàn)槟愕捻?xiàng)目中所有的組件（包含路由），它的父組件（或根組件）都是 app.vue高职，所以我們把整個(gè) app.vue 實(shí)例通過(guò) provide 對(duì)外提供钩乍。

app.vue：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    provide () {
      return {
        app: this
      }
    }
  }
</script>

上面，我們把整個(gè) app.vue 的實(shí)例 this 對(duì)外提供怔锌，命名為 app（這個(gè)名字可以自定義寥粹，推薦使用 app，使用這個(gè)名字后埃元，子組件不能再使用它作為局部屬性）涝涤。接下來(lái)，任何組件（或路由）只要通過(guò) inject 注入 app.vue 的 app 的話岛杀，都可以直接通過(guò) this.app.xxx 來(lái)訪問(wèn) app.vue 的 data妄痪、computed、methods 等內(nèi)容楞件。

app.vue 是整個(gè)項(xiàng)目第一個(gè)被渲染的組件衫生，而且只會(huì)渲染一次（即使切換路由裳瘪，app.vue 也不會(huì)被再次渲染），利用這個(gè)特性罪针，很適合做一次性全局的狀態(tài)數(shù)據(jù)管理彭羹，例如，我們將用戶的登錄信息保存起來(lái)：

app.vue泪酱，部分代碼省略：

<script>
  export default {
    provide () {
      return {
        app: this
      }
    },
    data () {
      return {
        userInfo: null
      }
    },
    methods: {
      getUserInfo () {
        // 這里通過(guò) ajax 獲取用戶信息后派殷，
        // 賦值給 this.userInfo，
        // 以下為偽代碼
        $.ajax('/user/info', (data) => {
          this.userInfo = data;
        });
      }
    },
    mounted () {
      this.getUserInfo();
    }
  }
</script>

這樣墓阀，任何頁(yè)面或組件毡惜，只要通過(guò) inject 注入 app 后，就可以直接訪問(wèn) userInfo 的數(shù)據(jù)了斯撮，比如：

<template>
  <div>
    {{ app.userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['app']
  }
</script>

是不是很簡(jiǎn)單呢经伙。除了直接使用數(shù)據(jù)，還可以調(diào)用方法勿锅。比如在某個(gè)頁(yè)面里帕膜，修改了個(gè)人資料，這時(shí)一開(kāi)始在 app.vue 里獲取的 userInfo 已經(jīng)不是最新的了溢十，需要重新獲取垮刹。可以這樣使用：

某個(gè)頁(yè)面：

<template>
  <div>
    {{ app.userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['app'],
    methods: {
      changeUserInfo () {
        // 這里修改完用戶數(shù)據(jù)后张弛，
        // 通知 app.vue 更新荒典，
        //以下為偽代碼
        $.ajax('/user/update', () => {
          // 直接通過(guò) this.app 就可以
          // 調(diào)用 app.vue 里的方法
          this.app.getUserInfo();
        })
      }
    }
  }
</script>

同樣非常簡(jiǎn)單。只要理解了 this.app 是直接獲取整個(gè) app.vue 的實(shí)例后吞鸭，使用起來(lái)就得心應(yīng)手了寺董。想一想，配置復(fù)雜的 Vuex 的全部功能瞒大，現(xiàn)在是不是都可以通過(guò) provide / inject 來(lái)實(shí)現(xiàn)了呢螃征？

進(jìn)階技巧

如果你的項(xiàng)目足夠復(fù)雜，或需要多人協(xié)同開(kāi)發(fā)時(shí)透敌，在 app.vue 里會(huì)寫(xiě)非常多的代碼盯滚，多到結(jié)構(gòu)復(fù)雜難以維護(hù)。這時(shí)可以使用 Vue.js 的混合 mixins酗电，將不同的邏輯分開(kāi)到不同的 js 文件里魄藕。

比如上面的用戶信息，就可以放到混合里：

user.js：

export default {
  data () {
    return {
      userInfo: null
    }
  },
  methods: {
    getUserInfo () {
      // 這里通過(guò) ajax 獲取用戶信
      // 息后撵术，賦值給 this.userInfo背率，
      // 以下為偽代碼
      $.ajax('/user/info', (data) => {
        this.userInfo = data;
      });
    }
  },
  mounted () {
    this.getUserInfo();
  }
}

然后在 app.vue 中混合：

app.vue：

<script>
  import mixins_user from '../mixins/user.js';

  export default {
    mixins: [mixins_user],
    data () {
      return {

      }
    }
  }
</script>

這樣，跟用戶信息相關(guān)的邏輯，都可以在 user.js 里維護(hù)寝姿，或者由某個(gè)人來(lái)維護(hù)交排，app.vue 也就很容易維護(hù)了。

獨(dú)立組件中使用

如果你顧忌 Vue.js 文檔中所說(shuō)饵筑，provide / inject 不推薦直接在應(yīng)用程序中使用埃篓，那沒(méi)有關(guān)系，仍然使用你熟悉的 Vuex 或 Bus 來(lái)管理你的項(xiàng)目就好根资。我們介紹的這對(duì) API架专，主要還是在獨(dú)立組件中發(fā)揮作用的。

只要一個(gè)組件使用了 provide 向下提供數(shù)據(jù)玄帕，那其下所有的子組件都可以通過(guò) inject 來(lái)注入部脚，不管中間隔了多少代，而且可以注入多個(gè)來(lái)自不同父級(jí)提供的數(shù)據(jù)裤纹。需要注意的是委刘，一旦注入了某個(gè)數(shù)據(jù)，比如上面示例中的 app服傍，那這個(gè)組件中就不能再聲明 app 這個(gè)數(shù)據(jù)了钱雷，因?yàn)樗呀?jīng)被父級(jí)占有骂铁。

獨(dú)立組件使用 provide / inject 的場(chǎng)景吹零，主要是具有聯(lián)動(dòng)關(guān)系的組件，比如接下來(lái)很快會(huì)介紹的第一個(gè)實(shí)戰(zhàn)：具有數(shù)據(jù)校驗(yàn)功能的表單組件 Form拉庵。它其實(shí)是兩個(gè)組件灿椅，一個(gè)是 Form，一個(gè)是 FormItem钞支，F(xiàn)ormItem 是 Form 的子組件茫蛹，它會(huì)依賴 Form 組件上的一些特性（props），所以就需要得到父組件 Form烁挟，這在 Vue.js 2.2.0 版本以前婴洼，是沒(méi)有 provide / inject 這對(duì) API 的，而 Form 和 FormItem 不一定是父子關(guān)系撼嗓，中間很可能間隔了其它組件柬采，所以不能單純使用 $parent 來(lái)向上獲取實(shí)例。在 Vue.js 2.2.0 之前且警，一種比較可行的方案是用計(jì)算屬性動(dòng)態(tài)獲确勰怼：

computed: {
  form () {
    let parent = this.$parent;
    while (parent.$options.name !== 'Form') {
      parent = parent.$parent;
    }
    return parent;
  }
}

每個(gè)組件都可以設(shè)置 name 選項(xiàng)，作為組件名的標(biāo)識(shí)斑芜，利用這個(gè)特點(diǎn)肩刃，通過(guò)向上遍歷，直到找到需要的組件。這個(gè)方法可行盈包，但相比一個(gè) inject 來(lái)說(shuō)沸呐，太費(fèi)勁了，而且不那么優(yōu)雅和 native呢燥。如果用 inject垂谢，可能只需要一行代碼：

export default {
  inject: ['form']
}

不過(guò)，這一切的前提是你使用 Vue.js 2.2.0 以上版本疮茄。

結(jié)語(yǔ)

如果這是你第一次聽(tīng)說(shuō) provide / inject 這對(duì) API滥朱，一定覺(jué)得它太神奇了，至少筆者第一時(shí)間知曉時(shí)是這樣的力试。它解決了獨(dú)立組件間通信的問(wèn)題徙邻，用好了還有出乎意料的效果。筆者在開(kāi)發(fā) iView Developer 時(shí)畸裳，全站就是使用這種方法來(lái)做全局?jǐn)?shù)據(jù)的管理的缰犁，如果你有機(jī)會(huì)一個(gè)人做一個(gè)項(xiàng)目時(shí)，不妨試試這種方法怖糊。

下一節(jié)帅容，將介紹另一種組件間通信的方法，不同于 provide / inject 的是伍伤，它們不是 Vue.js 內(nèi)置的 API并徘。