組件的通信 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)聽的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的。

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

替代 Vuex

我們知道，在做 Vue 大型項(xiàng)目時(shí)，可以使用 Vuex 做狀態(tài)管理，它是一個(gè)專為 Vue.js 開發(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é)同開發(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í)一開始在 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é)同開發(fā)時(shí)，在 app.vue 里會(huì)寫非常多的代碼，多到結(jié)構(gòu)復(fù)雜難以維護(hù)。這時(shí)可以使用 Vue.js 的混合 mixins，將不同的邏輯分開到不同的 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)獲?。?/p>

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

如果這是你第一次聽說(shuō) provide / inject 這對(duì) API，一定覺(jué)得它太神奇了，至少筆者第一時(shí)間知曉時(shí)是這樣的。它解決了獨(dú)立組件間通信的問(wèn)題，用好了還有出乎意料的效果。筆者在開發(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。