欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中使用mixins/extends傳入?yún)?shù)的方式

 更新時間:2022年05月24日 10:53:20   作者:前端開發(fā)終生學(xué)習(xí)者  
這篇文章主要介紹了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組件淺析

    如何使用Vue3設(shè)計實現(xiàn)一個Model組件淺析

    v-model在Vue里面是一個語法糖,數(shù)據(jù)的雙向綁定,本質(zhì)上還是通過 自定義標簽的attribute傳遞和接受,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3設(shè)計實現(xiàn)一個Model組件的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案

    vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案

    我自己使用addRoutes動態(tài)添加的路由頁面,使用router-link標簽可以跳轉(zhuǎn),但是一刷新就會自動跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧
    2023-10-10
  • 在vant中如何使用dialog彈窗

    在vant中如何使用dialog彈窗

    這篇文章主要介紹了在vant中如何使用dialog彈窗,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 詳解Vue.js 作用域、slot用法(單個slot、具名slot)

    詳解Vue.js 作用域、slot用法(單個slot、具名slot)

    這篇文章主要介紹了Vue.js 作用域、slot用法(單個slot、具名slot),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-10-10
  • Vue中瀑布流布局與圖片加載優(yōu)化的實現(xiàn)

    Vue中瀑布流布局與圖片加載優(yōu)化的實現(xiàn)

    本文主要介紹了Vue中瀑布流布局與圖片加載優(yōu)化的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-06-06
  • Vue 的 v-model用法實例

    Vue 的 v-model用法實例

    這篇文章主要介紹了Vue 的 v-model用法實例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-11-11
  • Vue $emit()不能觸發(fā)父組件方法的原因及解決

    Vue $emit()不能觸發(fā)父組件方法的原因及解決

    這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 淺析前端路由簡介以及vue-router實現(xiàn)原理

    淺析前端路由簡介以及vue-router實現(xiàn)原理

    路由就是用來跟后端服務(wù)器進行交互的一種方式,通過不同的路徑,來請求不同的資源,請求不同的頁面是路由的其中一種功能。這篇文章主要介紹了前端路由簡介以及vue-router實現(xiàn)原理,需要的朋友可以參考下
    2018-06-06
  • Vue 詳解mixins混入用法大全

    Vue 詳解mixins混入用法大全

    如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度,針對這種情況官方提供了Mixins特性,這時使用Vue mixins混入有很大好處,下面就介紹下Vue mixins混入使用方法,需要的朋友參考下吧
    2021-08-08
  • 基于Echarts圖表在div動態(tài)切換時不顯示的解決方式

    基于Echarts圖表在div動態(tài)切換時不顯示的解決方式

    這篇文章主要介紹了基于Echarts圖表在div動態(tài)切換時不顯示的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07

最新評論