您好,登錄后才能下訂單哦!
這篇“Vue3中的h函數(shù)如何使用”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue3中的h函數(shù)如何使用”文章吧。
眾所周知,vue內(nèi)部構(gòu)建的其實是虛擬DOM,而虛擬DOM是由虛擬節(jié)點生成的,實質(zhì)上虛擬節(jié)點也就是一個js對象
事實上,我們在vue中寫的template,最終也是經(jīng)過渲染函數(shù)生成對應的VNode
而h函數(shù)就是用來生成VNode的一個函數(shù),他的全名叫做createVNode
他一共跟三個參數(shù)
第一個參數(shù)
是一個字符串,他是必須的
這個字符串可以是 html標簽名,一個組件、一個異步的組件或者是函數(shù)組件
第二個參數(shù)
是一個對象,可選的
與attribute、prop和事件相對應的對象
第三個參數(shù)
可以是字符串、數(shù)組或者是一個對象
他是VNodes,使用h函數(shù)來進行創(chuàng)建
<script> import { h } from 'vue' export default { setup() { return () => h("h3", null, "Hello World") } } </script>
渲染效果如下
當然我們還可以使用rener函數(shù)進行渲染
<script> import { h } from 'vue' export default { render() { return h("h3", null, "Hello World") } } </script>
計數(shù)器
<script> import { h } from 'vue' export default { data() { return { counter: 0 } }, render() { return h("div", null, [ h("h3", null, "計數(shù)器"), h("h4", null, `計數(shù)${this.counter}`), h("button", { onClick: () => this.counter++ },"點一下") ]) } } </script>
渲染如下
我們先寫一個組件HelloWorld.vue
<script setup lang="ts"> import { ref } from 'vue'; const param = ref("Hello World") </script> <template> <h3>{{ param }}</h3> </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> <h3>{{ param }}</h3> <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>
最終渲染如下
以上就是關(guān)于“Vue3中的h函數(shù)如何使用”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。