vue中this.$createElement方法的使用
vue this.$createElement方法
element ui中的slider的marks屬性中使用到this.$createElement方法設(shè)置標(biāo)記樣式:
上面雖然只用到兩個(gè)參數(shù),實(shí)際上,此方法有三個(gè)參數(shù):
①第一個(gè)參數(shù)為標(biāo)簽,即創(chuàng)建的節(jié)點(diǎn)元素的標(biāo)簽是什么
②第二個(gè)參數(shù)是屬性配置,如class、style等
③第三個(gè)參數(shù)是節(jié)點(diǎn)元素的內(nèi)容
this.$createElement方法的寫(xiě)法
const h = this.$createElement; this.$info({ title: 'This is a notification message', content: h('div', {}, [ h('p', 'some messages...some messages...'), h('p', 'some messages...some messages...'), ]), onOk() {}, });
生成的對(duì)話框如下:
使用第二個(gè)參數(shù)進(jìn)行屬性配置,例如以下代碼:
h('div', { class: 'test' }, [ h('p', 'some messages...some messages...'), h('p', 'some messages...some messages...') ])
生成的是:
可以看出,dom元素上多了class屬性
再試試以下代碼:
h('div', { style: { color: 'green' } }, [ h('p', 'some messages...some messages...'), h('p', 'some messages...some messages...') ])
生成的對(duì)話框的字體就會(huì)變成綠色:
關(guān)于createElement使用實(shí)例
Vue 提供了createElement 來(lái)創(chuàng)建虛擬dom,方便我們來(lái)函數(shù)化的方式來(lái)定義復(fù)雜的組件結(jié)構(gòu)。在組件定義的時(shí)候,通常render函數(shù)的參數(shù)里都會(huì)帶上該函數(shù)的引用。方便用戶調(diào)用。
參數(shù)說(shuō)明
createElement 默認(rèn)暴露給用戶傳遞3個(gè)參數(shù),參考文檔代碼介紹:
// @returns {VNode} createElement( // {String | Object | Function} // 一個(gè) HTML 標(biāo)簽名、組件選項(xiàng)對(duì)象,或者 // resolve 了上述任何一種的一個(gè) async 函數(shù)。必填項(xiàng)。 'div', // {Object} // 一個(gè)與模板中屬性對(duì)應(yīng)的數(shù)據(jù)對(duì)象??蛇x。 { // (詳情見(jiàn)下一節(jié)) }, // {String | Array} // 子級(jí)虛擬節(jié)點(diǎn) (VNodes),由 `createElement()` 構(gòu)建而成, // 也可以使用字符串來(lái)生成“文本虛擬節(jié)點(diǎn)”??蛇x。 [ '先寫(xiě)一些文字', createElement('h1', '一則頭條'), createElement(MyComponent, { props: { someProp: 'foobar' } }) ] )
使用示例
//創(chuàng)建一個(gè)div節(jié)點(diǎn) createElement("div", { return createElement("div", { domProps: { innerHTML: "hello !" } }) }) // 按照組件名來(lái)返回一個(gè)虛擬dom createElement("component-name", { props: { name: "hello" } }) // 設(shè)置子對(duì)象 return createElement("div", { class: "box" }, [ createElement("span", { domProps: { innerHTML: 'bob !' } }) ])
源碼解讀
createElement 最終是通過(guò)調(diào)用new VNode 來(lái)創(chuàng)建虛擬dom,函數(shù)在調(diào)用new VNode之前處理了很多限制的情況,比如:data不能是響應(yīng)式數(shù)據(jù),tag是否為空等等,詳見(jiàn)下面代碼中的中文注釋
function _createElement ( context, tag, data, children, normalizationType ) { if (isDef(data) && isDef((data).__ob__)) { //檢測(cè)是否是響應(yīng)式數(shù)據(jù) warn( "Avoid using observed data object as vnode data: " + (JSON.stringify(data)) + "\n" + 'Always create fresh vnode data objects in each render!', context ); return createEmptyVNode() } // object syntax in v-bind if (isDef(data) && isDef(data.is)) { //檢測(cè)data中是否有is屬性,是的話tag替換為is指向的內(nèi)容,處理動(dòng)態(tài)組件 tag = data.is; } if (!tag) { // tag如果為空,創(chuàng)建空虛擬節(jié)點(diǎn) // in case of component :is set to falsy value return createEmptyVNode() } // warn against non-primitive key if (isDef(data) && isDef(data.key) && !isPrimitive(data.key) // data 中的key如果定義了必須是數(shù)字或者字符串 ) { { warn( 'Avoid using non-primitive value as key, ' + 'use string/number value instead.', context ); } } // support single function children as default scoped slot if (Array.isArray(children) && typeof children[0] === 'function' ) { data = data || {}; data.scopedSlots = { default: children[0] }; children.length = 0; } // 標(biāo)準(zhǔn)化處理children的兩種模式 if (normalizationType === ALWAYS_NORMALIZE) { children = normalizeChildren(children); } else if (normalizationType === SIMPLE_NORMALIZE) { children = simpleNormalizeChildren(children); } var vnode, ns; if (typeof tag === 'string') { var Ctor; ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag); if (config.isReservedTag(tag)) { // 判讀是否是標(biāo)準(zhǔn)的html 標(biāo)簽 // platform built-in elements vnode = new VNode( config.parsePlatformTagName(tag), data, children, undefined, undefined, context ); } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {// 如果tag對(duì)應(yīng)的是組件名,創(chuàng)建組件 // component vnode = createComponent(Ctor, data, context, children, tag); } else { // unknown or unlisted namespaced elements // check at runtime because it may get assigned a namespace when its // parent normalizes children vnode = new VNode( tag, data, children, undefined, undefined, context ); } } else { // direct component options / constructor vnode = createComponent(tag, data, context, children); } if (Array.isArray(vnode)) { return vnode } else if (isDef(vnode)) { if (isDef(ns)) { applyNS(vnode, ns); } if (isDef(data)) { registerDeepBindings(data); } return vnode } else { return createEmptyVNode() } }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
element 穿梭框性能優(yōu)化的實(shí)現(xiàn)
本文主要介紹了element 穿梭框性能優(yōu)化,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10Vue狀態(tài)管理庫(kù)Pinia詳細(xì)介紹
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具,簡(jiǎn)單來(lái)說(shuō)相當(dāng)于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,需要的朋友可以參考下2022-08-08深入淺析Vue.js中 computed和methods不同機(jī)制
這篇文章給大家介紹了Vue.js中 computed和methods不同機(jī)制,在vue.js中,methods和computed兩種方式來(lái)動(dòng)態(tài)當(dāng)作方法使用,文中還給大家提到了computed和methods的區(qū)別,感興趣的朋友一起看看吧2018-03-03從0搭建Vue3組件庫(kù)如何使用?glup?打包組件庫(kù)并實(shí)現(xiàn)按需加載
這篇文章主要介紹了從0搭建Vue3組件庫(kù)如何使用?glup?打包組件庫(kù)并實(shí)現(xiàn)按需加載,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案
這篇文章主要介紹了vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案,幫助大家更好的使用vue框架,感興趣的朋友可以了解下2020-12-12vue 彈框產(chǎn)生的滾動(dòng)穿透問(wèn)題的解決
這篇文章主要介紹了vue 彈框產(chǎn)生的滾動(dòng)穿透問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例
下面小編就為大家?guī)?lái)一篇vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11vue elementUI table 自定義表頭和行合并的實(shí)例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05