provide/inject是Vue.js2.2.0版本后新增的API：

provide：Object | () => Object//一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。

inject：Array<string> | { [key: string]: string | Symbol | Object }//一個(gè)字符串?dāng)?shù)組，或一個(gè)對(duì)象

雖然官方文檔說(shuō)，provide和inject主要為高階插件/組件庫(kù)提供用例。并不推薦直接用于應(yīng)用程序代碼中，但是在插件 / 組件庫(kù)（比如 iView，事實(shí)上 iView 的很多組件都在用）。不過(guò)建議歸建議，如果你用好了，這個(gè) API 會(huì)非常有用。

這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有的子孫后代注入一個(gè)依賴，不論組件的層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

注意：provide和inject綁定并不是可響應(yīng)的。這顯然不是設(shè)計(jì)的失誤，而是刻意的。

下面我們來(lái)看一看它最簡(jiǎn)單的用法：

//祖先級(jí)組件（上級(jí)組件）
<template>
  <div>
    <Pro></Pro>
  </div>
</template>
<script>
import Pro from '../components/provide.vue';
export default {
  data(){
    return{
    }
  },
   provide:{
    foo:'test'
  },
  components:{
    Pro,
  }
}
</script>
<style scoped>
</style>

//子孫級(jí)組件（下級(jí)組件）
<template>
  <div>
    <p>{{foo}}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
    }
  },
  inject:['foo'],
}
</script>
<style scoped>
</style>

我們?cè)谏霞?jí)組件中設(shè)置了一個(gè)provide：foo，值為test，它的作用就是將foo這個(gè)變量提供給它的所有下級(jí)組件。而在下級(jí)組件中通過(guò)inject注入了從上級(jí)組件中提供的foo變量，那么在下級(jí)組件中，就可以直接通過(guò)this.foo來(lái)訪問(wèn)了。

再次強(qiáng)調(diào)一遍，provide和inject綁定并不是可響應(yīng)的，所以上述例子中上級(jí)組件的foo改變了,下級(jí)組件的this.foo的值還是不會(huì)改變的。

我們一般會(huì)在main.js中導(dǎo)入app.vue作為根組件，我們需要在app.vue上做文章，這就是我們實(shí)現(xiàn)功能的關(guān)鍵。我們可以這樣理解：app.vue作為一個(gè)最外層的根組件，用來(lái)存儲(chǔ)所有需要的全局?jǐn)?shù)據(jù)和狀態(tài)。因?yàn)轫?xiàng)目中的所有組件（包含路由），它的父組件（或根組件）都是app.vue，所有我們可以把整個(gè)app.vue實(shí)例通過(guò)provide對(duì)外提供。那么，所有的組件都能共享其數(shù)據(jù)，方法等。

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

上面，我們把整個(gè)app.vue的實(shí)例`this`對(duì)外提供，接下來(lái)，任何組件（或路由）只要通過(guò)`inject`注入app.vue的話，都可以通過(guò)this.app.xxx的形式來(lái)訪問(wèn)app.vue的data，computed，method等內(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)了呢？

如果你顧忌 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í)占有。

進(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 文件里。

我先簡(jiǎn)單介紹一下什么是mixins:

混入 (mixin) 提供了一種非常靈活的方式，來(lái)分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。(個(gè)人理解mixins就是定義一部分公共的方法或者計(jì)算屬性,然后混入到各個(gè)組件中使用,方便管理與統(tǒng)一修改)

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

//新建文件(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中混合：

<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ù)了。

要深入了解混入請(qǐng)參照官方文檔：https://cn.vuejs.org/v2/guide/mixins.html

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論