vue3中的render函數(shù)里定義插槽和使用插槽
render函數(shù)里定義插槽和使用插槽
vue3中this.slots和vue2的區(qū)別
vue3:this.slots是一個(gè){ [name: string]: (…args: any[]) => Array | undefined }的對(duì)象,每個(gè)具名插槽的內(nèi)容都要通過函數(shù)調(diào)用。如v-slot:foo插槽分發(fā)的內(nèi)容通過this.slots.foo( )返回
vue2:this.slots是一個(gè){ [name: string]: ?Array }的對(duì)象,v-slot:foo的內(nèi)容通過this.slots.foo來訪問 , 而this.scopedSlots才是和vue3里的this.$slots作用一樣.
定義插槽
this.$slots.[插槽名] 這個(gè)一個(gè)返回VNode數(shù)組的函數(shù),用于訪問靜態(tài)插槽內(nèi)容.
const BlogPost = defineComponent({ render(){ return h('div', [ h('h1',this.$slots.header&&this.$slots.header()||'默認(rèn)header插槽'), h('p',this.$slots.default&&this.$slots.default({message:'我是作用域插槽的message'})||'默認(rèn)default插槽'), h('h4',this.$slots.footer&&this.$slots.footer()||'默認(rèn)footer插槽'), ]) } })
// 以上代碼相當(dāng)于以下的template <template> <div> <h1> <slot name="header">默認(rèn)header插槽</slot> </h1> <p> <slot>默認(rèn)default插槽</slot> </p> <h4> <slot name="footer">默認(rèn)footer插槽</slot> </h4> </div> </template>
定義有插槽的組件使用插槽
在h函數(shù)的第三個(gè)參數(shù)中使用{ [name: string]: (…args: any[]) => Array | undefined }形式的對(duì)象來定義組件的具體插槽內(nèi)容
const BlogPostWrapper = defineComponent({ ? render(){ ? ? return h('div', ? ? ? ? ? ? ?{style:'background:skyblue'}, ? ? ? ? ? ? ?h( ? ? ? ?? ??? ??? ?BlogPost, ? ? ? ? ? ? ? ??? ?null, ? ? ? ? ? ? ? ??? ?{ ? ? ? ? ? ? ? ? ? header(props){ ? ? ? ? ? ? ? ? ? ? return '我是傳進(jìn)的header插槽內(nèi)容' ? ? ? ? ? ? ? ? ? }, ? ? ? ?? ??? ??? ? ?default(props){ ? ? ? ?? ??? ??? ? ?// 這里的props就是作用域插槽的插槽prop ? ? ? ? ? ? ? ? ? ? return 'BlogPostWrapper的default插槽內(nèi)容::>>'+props.message ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? footer(props){ ? ? ? ? ? ? ? ? ? ? return '我是傳進(jìn)的footer插槽內(nèi)容' ? ? ? ? ? ? ? ? ? } ? ? ?? ??? ??? ?} ? ? ?? ??? ?) ? ? ? ? ? ) ? ?? ?} })
// 相當(dāng)于template <template> ?? ?<div> ?? ??? ?<BlogPost> ?? ??? ??? ?<tempalte #header>'我是傳進(jìn)的header插槽內(nèi)容'</tempalte> ?? ??? ??? ?<tempalte #default="props"> ?? ??? ??? ??? ?{{'BlogPostWrapper的default插槽內(nèi)容::>>'+props.message}} ?? ??? ??? ?</tempalte> ?? ??? ??? ?<tempalte #footer>我是傳進(jìn)的footer插槽內(nèi)容</tempalte> ?? ??? ?</BlogPost> ?? ?</div> </template>
vue3 render函數(shù)小變動(dòng)
Render function API?是不是感覺有點(diǎn)陌生?那恭喜你,這個(gè)改動(dòng)不會(huì)對(duì)你這位 <template> 用戶造成影響。
老規(guī)矩,上帝視角看一下:
h
需要從全局導(dǎo)入進(jìn)來(不再是 render 函數(shù)的參數(shù)了)render
函數(shù)的參數(shù)改變了(為了在常規(guī)組件和函數(shù)組件中表現(xiàn)一致)VNodes
具備了扁平的屬性結(jié)構(gòu)
render函數(shù)的參數(shù)
2.x 這么寫
在 Vue 2.x 的版本中,render 函數(shù)會(huì)以參數(shù)的形式自動(dòng)接收 h 函數(shù)(aka:createElement):
export default { render(h) { return h('div'); } }
3.x 應(yīng)該這么寫
在即將到來的 Vue 3.x 版本中,h 函數(shù)需要手動(dòng)從全局引入進(jìn)來:
import { h } from 'vue'; export default { render() { return h('div'); } }
render函數(shù)簽名
2.x 這么寫
上面也提到了,2.x 的 render 函數(shù)會(huì)自動(dòng)接收 h 作為參數(shù):
export default { render(h) { return h('div'); } }
3.x 應(yīng)該這么寫
在 3.x 版本中,render 函數(shù)不再接收任何參數(shù)了,它僅存的主要作用就是在 setup 函數(shù)中使用。這樣方便獲取作用域鏈中的響應(yīng)式狀態(tài)以及各種函數(shù),當(dāng)然了,也方便獲取任何傳遞給 setup 函數(shù)的參數(shù)。
import { h, reactive } from 'vue'; export default { setup(props, { slots, attrs, emit }) { const state = reactive({ count: 0 }); function increment() { state.count++ } // 返回一個(gè) render 函數(shù) return () => { h( 'div', { onClick: increment, }, state.count, ) } } }
VNode屬性格式
2.x 是這樣的
domProps 是 VNode 屬性中的一個(gè)“嵌套列表”:
{ class: ['button', 'confirm-button'], style: { color: 'red' }, attrs: { id: 'confirm' }, domProps: { innerHTML: '' }, on: { click: confirmCreate }, key: 'submit-button', }
3.x 中則是這樣的
在 3.x 版本中,VNode 的所有屬性都已經(jīng)實(shí)現(xiàn)了“扁平化”的處理:
{ class: ['button', 'confirm-button'], style: { color: 'red' }, id: 'submit', innerHTML: '', onClick: confirmCreate, key: 'submit-button', }
其實(shí)我也很少用 render 函數(shù),畢竟 template 還是蠻香的。
如果想要獲得更多的詳細(xì)信息,請(qǐng)去這里:v3.vuejs.org/guide/migration/render-function-api.html(目前還沒有中文版)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)token過期自動(dòng)跳轉(zhuǎn)到登錄頁面
本文主要介紹了vue實(shí)現(xiàn)token過期自動(dòng)跳轉(zhuǎn)到登錄頁面,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10vue項(xiàng)目打包成桌面快捷方式(electron)的方法
本文主要介紹了vue項(xiàng)目打包成桌面快捷方式(electron)的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片,多圖片輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07vue項(xiàng)目如何設(shè)置全局字體樣式font-family
這篇文章主要介紹了vue項(xiàng)目如何設(shè)置全局字體樣式font-family問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決
這篇文章主要介紹了基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08