Vue通過provide inject實現元件通訊
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
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。