上一篇中我們說到，ref 和 $parent / $children在跨級通信時是有弊端的。當組件 A 和組件 B 中間隔了數代（甚至不确定具體級别）時，以往會借助 Vuex 或 Bus 這樣的解決方案，不得不引入三方庫來支持。本文介紹一種無依賴的組件通信方法：Vue.js 内置的 provide / inject 接口。

provide / inject 是 Vue.js 2.2.0 版本後新增的 API，文檔中有如下提示：

provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。

就是說 Vue.js 不建議在業務中使用這對 API，而是在插件 / 組件庫（比如 iView，事實上 iView 的很多組件都在用）。

我們先來看一下這個 API 怎麼用，假設有兩個組件： 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 裡，我們設置了一個 provide: name，值為 hello，它的作用就是将 name 這個變量提供給它的所有子組件。而在 B.vue 中，通過 inject 注入了從 A 組件中提供的 name 變量，那麼在組件 B 中，就可以直接通過 this.name 訪問這個變量了，它的值也是 hello。這就是 provide / inject API 最核心的用法。

需要注意的是：provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那麼其對象的屬性還是可響應的。

所以，上面 A.vue 的 name 如果改變了，B.vue 的 this.name 是不會改變的，仍然是 hello。

替代 Vuex

我們知道，在做 Vue 大型項目時，可以使用 Vuex 做狀态管理，它是一個專為 Vue.js 開發的狀态管理模式，用于集中式存儲管理應用的所有組件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。

那了解了 provide / inject 的用法，下面來看怎樣替代 Vuex。當然，我們的目的并不是為了替代 Vuex，它還是有相當大的用處，這裡隻是介紹另一種可行性。

使用 Vuex，最主要的目的是跨組件通信、全局數據維護、多人協同開發。需求比如有：用戶的登錄信息維護、通知信息維護等全局的狀态和數據。

一般在 webpack 中使用 Vue.js，都會有一個入口文件 main.js，裡面通常導入了 Vue、VueRouter、iView 等庫，通常也會導入一個入口組件 app.vue 作為根組件。一個簡單的 app.vue 可能隻有以下代碼：

使用 provide / inject 替代 Vuex，就是在這個 app.vue 文件上做文章。

我們把 app.vue 理解為一個最外層的根組件，用來存儲所有需要的全局數據和狀态，甚至是計算屬性（computed）、方法（methods）等。因為你的項目中所有的組件（包含路由），它的父組件（或根組件）都是 app.vue，所以我們把整個 app.vue 實例通過 provide 對外提供。

app.vue：

上面，我們把整個 app.vue 的實例 this 對外提供，命名為 app（這個名字可以自定義，推薦使用 app，使用這個名字後，子組件不能再使用它作為局部屬性）。接下來，任何組件（或路由）隻要通過 inject 注入 app.vue 的 app 的話，都可以直接通過 this.app.xxx 來訪問 app.vue 的 data、computed、methods 等内容。

app.vue 是整個項目第一個被渲染的組件，而且隻會渲染一次（即使切換路由，app.vue 也不會被再次渲染），利用這個特性，很适合做一次性全局的狀态數據管理，例如，我們将用戶的登錄信息保存起來：

app.vue，部分代碼省略：

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

這樣，任何頁面或組件，隻要通過 inject 注入 app 後，就可以直接訪問 userInfo 的數據了，比如：

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

是不是很簡單呢。除了直接使用數據，還可以調用方法。比如在某個頁面裡，修改了個人資料，這時一開始在 app.vue 裡獲取的 userInfo 已經不是最新的了，需要重新獲取。可以這樣使用：

某個頁面：

<template> <div> {{ app.userInfo }} </div> </template> <script> export default { inject: ['app'], methods: { changeUserInfo () { // 這裡修改完用戶數據後，通知 app.vue 更新，以下為僞代碼 $.ajax('/user/update', () => { // 直接通過 this.app 就可以調用 app.vue 裡的方法 this.app.getUserInfo(); }) } } } </script>

同樣非常簡單。隻要理解了 this.app 是直接獲取整個 app.vue 的實例後，使用起來就得心應手了。想一想，配置複雜的 Vuex 的全部功能，現在是不是都可以通過 provide / inject 來實現了呢？

進階技巧

如果你的項目足夠複雜，或需要多人協同開發時，在 app.vue 裡會寫非常多的代碼，多到結構複雜難以維護。這時可以使用 Vue.js 的混合 mixins，将不同的邏輯分開到不同的 js 文件裡。

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

user.js：

export default { data () { return { userInfo: null } }, methods: { getUserInfo () { // 這裡通過 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>

這樣，跟用戶信息相關的邏輯，都可以在 user.js 裡維護，或者由某個人來維護，app.vue 也就很容易維護了。

獨立組件中使用

如果你顧忌 Vue.js 文檔中所說，provide / inject 不推薦直接在應用程序中使用，那沒有關系，仍然使用你熟悉的 Vuex 或 Bus 來管理你的項目就好。我們介紹的這對 API，主要還是在獨立組件中發揮作用的。

隻要一個組件使用了 provide 向下提供數據，那其下所有的子組件都可以通過 inject 來注入，不管中間隔了多少代，而且可以注入多個來自不同父級提供的數據。需要注意的是，一旦注入了某個數據，比如上面示例中的 app，那這個組件中就不能再聲明 app 這個數據了，因為它已經被父級占有。

獨立組件使用 provide / inject 的場景，主要是具有聯動關系的組件。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部