vue中使用mixins/extends傳入?yún)?shù)的方式
使用mixins/extends傳入?yún)?shù)
最近做報表頁面,基本都是列表頁面,所以想用mixins。
但是接口的url不同,于是考慮怎么才能傳入?yún)?shù)去適配各個頁面。
后來發(fā)現(xiàn)mixin文件可以寫個函數(shù),接受傳遞過來的參數(shù),然后return一個對象。
大概如下:
mixin.js
export default function(config) { ? ? let { ? ? ? ? listUrl="", ? ? ? ? exportUrl="" ? ? } = config; ? ? return { ? ? ? ? created() { ? ? ? ? ? ? console.log(listUrl); ? ? ? ? ? ? console.log(exportUrl); ? ? ? ? } ? ? } }
xxx.vue
import Mixin from './mixin'; let mixin = new Mixin({ ? ? listUrl: "www.baidu.com", ? ? exportUrl: "www.yahu.com" }) ? export default{ ? ? mixins:[mixin], }
extends也是差不多。
vue mixins的原理
以前一直以為mixins在vue里面應(yīng)該不是很重要,只是提供了一個混入的api,慢慢的才知道m(xù)ixin在vue里面非常重要。生命周期、vuex等都有mixin的影子,在內(nèi)部算是很重要的一個api。
先上精簡過后的源碼:
export const LIFECYCLE_HOOKS = [ ? ? 'beforeCreate', ? ? 'created', ? ? 'beforeMount', ? ? 'mounted', ? ? 'beforeUpdate', ? ? 'updated', ? ? 'beforeDestroy', ? ? 'destroyed', ] const strats = {}; function mergeHook(parentVal, childValue) { ? ? if (childValue) { ? ? ? ? if (parentVal) { ? ? ? ? ? ? return parentVal.concat(childValue); ? ? ? ? } else { ? ? ? ? ? ? return [childValue] ? ? ? ? } ? ? } else { ? ? ? ? return parentVal; ? ? } } LIFECYCLE_HOOKS.forEach(hook => { ? ? strats[hook] = mergeHook })
上面這部分很好理解,是生命周期的合并,下面判斷有這些生命周期的key的時候,直接調(diào)用strats[key](parent[key], child[key]),我們都知道生命周期的mixins是先執(zhí)行mixins的再執(zhí)行當前組件的,所以直接concat,后面執(zhí)行循環(huán)調(diào)用的時候就是這個順序。
export function mergeOptions(parent, child) { ? ? const options = {} ? ? if (child.mixins) { ? ? ? ? for (var i = 0, l = child.mixins.length; i < l; i++) { ? ? ? ? ? ? var mixin = child.mixins[i]; ? ? ? ? ? ? parent = mergeOptions(parent, mixin); ? ? ? ? } ? ? } ? ? for (let key in parent) { ? ? ? ? mergeField(key) ? ? } ? ? for (let key in child) { ? ? ? ? if (!parent.hasOwnProperty(key)) { ? ? ? ? ? ? mergeField(key); ? ? ? ? } ? ? } ? ? function mergeField(key) { ? ? ? ? if (strats[key]) { ? ? ? ? ? ? options[key] = strats[key](parent[key], child[key]); ? ? ? ? } else { ? ? ? ? ? ? if (typeof parent[key] == 'object' && typeof child[key] == 'object') { ? ? ? ? ? ? ? ? options[key] = { ? ? ? ? ? ? ? ? ? ? ...parent[key], ? ? ? ? ? ? ? ? ? ? ...child[key] ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? options[key] = child[key]; ? ? ? ? ? ? } ? ? ? ? } ? ? } ? ? return options }
這邊生命周期是單獨判斷,其他熟悉方法則是一起的,比如方法methods,如果父和子都有,就結(jié)構(gòu)合并在一起。因為mixins用法可以傳入一個數(shù)組,這邊還需要優(yōu)先判斷是否有mixins字段,有就要遞歸合并。
核心有了其他都是調(diào)用了,比如把mixin方法掛載到vue上可以直接調(diào)用:
Vue.mixin = function (mixin) { ? ? // 將屬性合并到Vue.options上 ? ? this.options = mergeOptions(this.options,mixin); ? ? return this; }
初始化的時候先合并一次,生命周期也是,在狀態(tài)初始化之前先調(diào)用beforeCreate,初始化之后調(diào)用created,源碼搜索Vue.prototype._init這個方法里面就能看見,包括其他生命周期,可以搜索callhook去看看:
vm.$options = mergeOptions(vm.constructor.options,options); callHook(vm,'beforeCreate');
// 初始化狀態(tài)
initState(vm); callHook(vm,'created');
callHook就是循環(huán)調(diào)用生命周期:
export function callHook(vm, hook) { ? ? const handlers = vm.$options[hook]; ? ? if (handlers) { ? ? ? ? for (let i = 0; i < handlers.length; i++) { ? ? ? ? ? ? handlers[i].call(vm); ? ? ? ? } ? ? } }
mixin方法核心就是合并實例的屬性,watch、methods、data等,也可以新增一開始沒有的屬性,比如vuex的$store。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
如何使用Vue3設(shè)計實現(xiàn)一個Model組件淺析
v-model在Vue里面是一個語法糖,數(shù)據(jù)的雙向綁定,本質(zhì)上還是通過 自定義標簽的attribute傳遞和接受,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3設(shè)計實現(xiàn)一個Model組件的相關(guān)資料,需要的朋友可以參考下2022-08-08vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案
我自己使用addRoutes動態(tài)添加的路由頁面,使用router-link標簽可以跳轉(zhuǎn),但是一刷新就會自動跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧2023-10-10詳解Vue.js 作用域、slot用法(單個slot、具名slot)
這篇文章主要介紹了Vue.js 作用域、slot用法(單個slot、具名slot),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10Vue中瀑布流布局與圖片加載優(yōu)化的實現(xiàn)
本文主要介紹了Vue中瀑布流布局與圖片加載優(yōu)化的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06Vue $emit()不能觸發(fā)父組件方法的原因及解決
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07淺析前端路由簡介以及vue-router實現(xiàn)原理
路由就是用來跟后端服務(wù)器進行交互的一種方式,通過不同的路徑,來請求不同的資源,請求不同的頁面是路由的其中一種功能。這篇文章主要介紹了前端路由簡介以及vue-router實現(xiàn)原理,需要的朋友可以參考下2018-06-06基于Echarts圖表在div動態(tài)切換時不顯示的解決方式
這篇文章主要介紹了基于Echarts圖表在div動態(tài)切換時不顯示的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07