Vue?mergeProps用法詳細(xì)講解
很多人不知道m(xù)egreProps的用法,今天我們就來講解下mergeProps的用法以及原理
用法
大家覺得下面哪種用法是正確的呢?
這樣
style: mergeProps({ width: this.itemWidth }, xProps.style)
或者這樣
style: mergeProps({ style: { width: this.itemWidth }, ...(xProps?.style ?? {}) })
還是這樣
style: mergeProps( { style: { width: this.itemWidth }, }, xProps, ).style
你使用的話會使用上面哪一種呢?
不知道
因為寫的是jsx語法,所以查看了vue3的jsx語法,發(fā)現(xiàn)里面并沒有關(guān)于這個解釋,只說到了默認(rèn)開啟
于是去vue3官網(wǎng)查找,找到
megreProps:Merge multiple props objects with special handling for certain props.
意思就說合并多個道具對象,對某些道具進(jìn)行特殊處理
所以前面兩種寫法是錯誤的
接著看了下mergeProps源碼的寫法
// ...args將多個對象收集成數(shù)組 export function mergeProps(...args: (Data & VNodeProps)[]) { // 最終合并的結(jié)果 const ret: Data = {} // 遍歷用戶傳入的多個對象 for (let i = 0; i < args.length; i++) { // 取到傳入的對象值 const toMerge = args[i] for (const key in toMerge) { // 對class進(jìn)行序列化合并處理 if (key === 'class') { if (ret.class !== toMerge.class) { ret.class = normalizeClass([ret.class, toMerge.class]) } // 對style進(jìn)行序列化合并處理 } else if (key === 'style') { ret.style = normalizeStyle([ret.style, toMerge.style]) // 對其他的綁定的屬性進(jìn)行合并 } else if (isOn(key)) { const existing = ret[key] const incoming = toMerge[key] if ( incoming && existing !== incoming && !(isArray(existing) && existing.includes(incoming)) ) { ret[key] = existing ? [].concat(existing as any, incoming as any) : incoming } // 如果是普通元素上的用戶自定義屬性,則直接賦值 } else if (key !== '') { ret[key] = toMerge[key] } } } return ret }
所以你傳入的對象里面是需要有style、class等key的
接下來看看normalizeClass這個方法,這個方法就是將用戶寫的多種格式(比如數(shù)組,對象,字符串)的class進(jìn)行序列化成字符串給到最終渲染的元素
export function normalizeClass(value: unknown): string { let res = '' // 如果是字符串,直接返回 if (isString(value)) { res = value // 如果是數(shù)組 } else if (isArray(value)) { for (let i = 0; i < value.length; i++) { // 遞歸調(diào)用進(jìn)行處理 const normalized = normalizeClass(value[i]) if (normalized) { res += normalized + ' ' } } // 如果是對象, 如{ active: isActive, 'text-danger': hasError },需要把key拼接 } else if (isObject(value)) { for (const name in value) { if (value[name]) { res += name + ' ' } } } return res.trim() }
再看看normalizeStyle這個函數(shù)
export type NormalizedStyle = Record<string, string | number> export function normalizeStyle( value: unknown ): NormalizedStyle | string | undefined { // 如果是數(shù)組的情況 if (isArray(value)) { const res: NormalizedStyle = {} for (let i = 0; i < value.length; i++) { const item = value[i] const normalized = isString(item) ? parseStringStyle(item) : (normalizeStyle(item) as NormalizedStyle) if (normalized) { // 將序列化后的style保存到ret上 for (const key in normalized) { res[key] = normalized[key] } } } return res } else if (isString(value)) { return value } else if (isObject(value)) { return value } }
parseStringStyle函數(shù)就是將字符串對;進(jìn)行分割,然后設(shè)置對應(yīng)的key,value
元素上的style只能使用string,所以在最終掛在到dom元素上需要進(jìn)行stringifyStyle
export function stringifyStyle( styles: NormalizedStyle | string | undefined ): string { let ret = '' if (!styles || isString(styles)) { return ret } for (const key in styles) { const value = styles[key] const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key) if ( isString(value) || (typeof value === 'number' && isNoUnitNumericStyleProp(normalizedKey)) ) { // only render valid values ret += `${normalizedKey}:${value};` } } return ret }
所以通過簡單的對vue3的mergeProps的代碼進(jìn)行簡單分析就能知道其原理了,使用上也會更加的熟練
到此這篇關(guān)于Vue mergeProps用法詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue mergeProps內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于vue與element實現(xiàn)創(chuàng)建試卷相關(guān)功能(實例代碼)
這篇文章主要介紹了基于vue與element實現(xiàn)創(chuàng)建試卷相關(guān)功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12vue2 使用@vue/composition-api依賴包 編譯、打包各種報錯問題分析
由于package.json 文件中 vue、vue-template-compiler 版本號前面 多了個 ^ 導(dǎo)致實際導(dǎo)入時,node_module中的 vue 版本可能被升級為 2.7.x,這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報錯問題分析,需要的朋友可以參考下2023-01-01建立和維護(hù)大型 Vue.js 項目的 10 個最佳實踐
這篇文章小編要與大家分享的是建立和維護(hù)大型 Vue.js 項目的 10 個最佳實踐,需要的小伙伴請和小編一起學(xué)習(xí)下面文章的具體內(nèi)容吧2021-09-09Vue引入使用localforage改進(jìn)本地離線存儲方式(突破5M限制)
這篇文章主要介紹了Vue引入使用localforage改進(jìn)本地離線存儲方式(突破5M限制),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue2實現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼
這篇文章主要介紹了vue2實現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼,需要的朋友可以參考下2018-08-08Vue3中內(nèi)置組件Teleport的基本使用與典型案例
Teleport是一種能夠?qū)⑽覀兊哪0逡苿拥紻OM中Vue app之外的其他位置的技術(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中內(nèi)置組件Teleport的基本使用與典型案例的相關(guān)資料,需要的朋友可以參考下2023-04-04