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

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

inject：Array<string> | { [key: string]: string | Symbol | Object }//一個字符串數組，或一個對象

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

這對選項需要一起使用，以允許一個祖先組件向其所有的子孫后代注入一個依賴，不論組件的層次有多深，并在起上下游關系成立的時間里始終生效。

注意：provide和inject綁定并不是可響應的。這顯然不是設計的失誤，而是刻意的。

下面我們來看一看它最簡單的用法：

//祖先級組件（上級組件）<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>

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

我們在上級組件中設置了一個provide：foo，值為test，它的作用就是將foo這個變量提供給它的所有下級組件。而在下級組件中通過inject注入了從上級組件中提供的foo變量，那么在下級組件中，就可以直接通過this.foo來訪問了。

再次強調一遍，provide和inject綁定并不是可響應的，所以上述例子中上級組件的foo改變了,下級組件的this.foo的值還是不會改變的。

我們一般會在main.js中導入app.vue作為根組件，我們需要在app.vue上做文章，這就是我們實現功能的關鍵。我們可以這樣理解：app.vue作為一個最外層的根組件，用來存儲所有需要的全局數據和狀態。因為項目中的所有組件（包含路由），它的父組件（或根組件）都是app.vue，所有我們可以把整個app.vue實例通過provide對外提供。那么，所有的組件都能共享其數據，方法等。

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

上面，我們把整個app.vue的實例`this`對外提供，接下來，任何組件（或路由）只要通過`inject`注入app.vue的話，都可以通過this.app.xxx的形式來訪問app.vue的data，computed，method等內容。

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` 來實現了呢？

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

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

進階技巧：

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

我先簡單介紹一下什么是mixins:

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

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

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

<script> import mixins_user from’../mixins/user.js’; export default { mixins: [mixins_user], data () { return { } } }</script>

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。