這篇文章主要講解了“Vue3中的h函數(shù)怎么使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue3中的h函數(shù)怎么使用”吧！

創(chuàng)新互聯(lián)是一家專業(yè)提供焉耆企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為焉耆眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

簡介

• 眾所周知，vue內(nèi)部構(gòu)建的其實是虛擬DOM，而虛擬DOM是由虛擬節(jié)點(diǎn)生成的，實質(zhì)上虛擬節(jié)點(diǎn)也就是一個js對象

• 事實上，我們在vue中寫的template,最終也是經(jīng)過渲染函數(shù)生成對應(yīng)的VNode

• 而h函數(shù)就是用來生成VNode的一個函數(shù)，他的全名叫做createVNode

簡單使用

參數(shù)

他一共跟三個參數(shù)

第一個參數(shù)

• 是一個字符串，他是必須的

• 這個字符串可以是 html標(biāo)簽名，一個組件、一個異步的組件或者是函數(shù)組件

第二個參數(shù)

• 是一個對象，可選的

• 與attribute、prop和事件相對應(yīng)的對象

第三個參數(shù)

• 可以是字符串、數(shù)組或者是一個對象

• 他是VNodes，使用h函數(shù)來進(jìn)行創(chuàng)建

使用

<script>
import { h } from 'vue'

export default {
    setup() {
        return () => h("h4", null, "Hello World")
    }
}

</script>

渲染效果如下

當(dāng)然我們還可以使用rener函數(shù)進(jìn)行渲染

<script>
import { h } from 'vue'

export default {
    render() {
        return h("h4", null, "Hello World")
    }
}
</script>

計數(shù)器

<script>
import { h } from 'vue'

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [
            h("h4", null, "計數(shù)器"),
            h("h5", null, `計數(shù)${this.counter}`),
            h("button", { onClick: () => this.counter++ },"點(diǎn)一下")
        ])
    }
}
</script>

渲染如下

進(jìn)階使用

函數(shù)組件

我們先寫一個組件HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue';

const param = ref("Hello World") 
</script>

<template>
    <h4>{{ param }}</h4>
</template>

<style scoped lang="less"></style>

然后，我們在h函數(shù)中引入這個組件，他就會被渲染

<script>
import { h } from 'vue'

import HelloWorld from './HelloWorld.vue'

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [h(HelloWorld)])
    }
}
</script>

插槽

h函數(shù)同樣支持插槽，我們把HelloWorld組件改成一個插槽組件

HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue';

const param = ref("Hello World") 
</script>

<template>
    <h4>{{ param }}</h4>
    <slot></slot>
</template>

<style scoped lang="less"></style>

index.ts

<script>
import { h } from 'vue'

import HelloWorld from './HelloWorld.vue'

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [h(HelloWorld, {}, [h("div", null, "Hello Slot")])])
    }
}
</script>

最終渲染如下

感謝各位的閱讀，以上就是“Vue3中的h函數(shù)怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue3中的h函數(shù)怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

文章題目：Vue3中的h函數(shù)怎么使用
本文鏈接：http://www.rwnh.cn/article36/ipccpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、做網(wǎng)站、電子商務(wù)、網(wǎng)站改版、響應(yīng)式網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)