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

vue3中的render函數(shù)里定義插槽和使用插槽

 更新時(shí)間:2022年07月02日 10:59:35   作者:qq_42372534  
這篇文章主要介紹了vue3中的render函數(shù)里定義插槽和使用插槽方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)到登錄頁面

    本文主要介紹了vue實(shí)現(xiàn)token過期自動(dòng)跳轉(zhuǎn)到登錄頁面,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • vue項(xiàng)目打包成桌面快捷方式(electron)的方法

    vue項(xiàng)目打包成桌面快捷方式(electron)的方法

    本文主要介紹了vue項(xiàng)目打包成桌面快捷方式(electron)的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • 關(guān)于Echarts餅圖圖例太長的解決方案

    關(guān)于Echarts餅圖圖例太長的解決方案

    這篇文章主要介紹了關(guān)于Echarts餅圖圖例太長的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • vue3.0?setup中使用vue-router問題

    vue3.0?setup中使用vue-router問題

    這篇文章主要介紹了vue3.0?setup中使用vue-router問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片

    vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片,多圖片輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue項(xiàng)目如何設(shè)置全局字體樣式font-family

    vue項(xiàng)目如何設(shè)置全局字體樣式font-family

    這篇文章主要介紹了vue項(xiàng)目如何設(shè)置全局字體樣式font-family問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • Vue中Vue.use()的原理及基本使用

    Vue中Vue.use()的原理及基本使用

    相信很多人在用Vue使用別人的組件時(shí),會(huì)用到 Vue.use() ,例如:Vue.use(VueRouter)、Vue.use(MintUI),這篇文章主要給大家介紹了關(guān)于Vue中Vue.use()的原理及基本使用的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • vue如何查找數(shù)組中符合條件的對(duì)象

    vue如何查找數(shù)組中符合條件的對(duì)象

    這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對(duì)象,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決

    基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決

    這篇文章主要介紹了基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 一文解析Vue h函數(shù)到底是個(gè)啥

    一文解析Vue h函數(shù)到底是個(gè)啥

    h()函數(shù)是Vue.js中的一個(gè)工具函數(shù),用于創(chuàng)建虛擬DOM節(jié)點(diǎn),具有更高的靈活性和控制力,本文介紹Vue h函數(shù)到底是個(gè)啥,感興趣的朋友一起看看吧
    2025-02-02

最新評(píng)論