Cara menggunakan fungsi h dalam Vue3

Pengenalan

• Seperti yang kita semua tahu, apa yang dibina di dalam vue sebenarnya adalah DOM maya, dan DOM maya dijana oleh nod maya pada dasarnya objek js

• Malah, templat yang kita tulis dalam vue akhirnya menjana VNode yang sepadan

• melalui fungsi rendering dan fungsi h digunakan untuk menjana Fungsi VNode, nama penuhnya ialah createVNode

Penggunaan mudah

parameter

Dia mempunyai sejumlah tiga parameter

Parameter pertama

• ialah rentetan, ia diperlukan

• Ini Rentetan boleh menjadi nama tag html, komponen, komponen tak segerak atau komponen fungsi

Parameter kedua

• ialah objek, pilihan

• Objek yang sepadan dengan atribut, prop dan acara

Yang ketiga Parameter

• boleh menjadi rentetan, tatasusunan atau objek

• Ia ialah VNodes dan dicipta menggunakan fungsi h

Kesan rendering menggunakan

<script>
import { h } from &#39;vue&#39;

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

</script>

adalah seperti berikut

Sudah tentu kita juga boleh menggunakan fungsi rener untuk rendering

<script>
import { h } from &#39;vue&#39;

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

Kaunter

<script>
import { h } from &#39;vue&#39;

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [
            h("h3", null, "计数器"),
            h("h4", null, `计数${this.counter}`),
            h("button", { onClick: () => this.counter++ },"点一下")
        ])
    }
}
</script>

dipaparkan seperti berikut

Penggunaan lanjutan

Komponen fungsi

Mari menulis komponen dahuluHelloWorld.vue

<script setup lang="ts">
import { ref } from &#39;vue&#39;;

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

<template>
    <h3>{{ param }}</h3>
</template>

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

Kemudian, kami memperkenalkan komponen ini dalam fungsi h, dan ia akan diberikan

<script>
import { h } from &#39;vue&#39;

import HelloWorld from &#39;./HelloWorld.vue&#39;

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

Slot

fungsi h juga menyokong slot, kami menukar komponen HelloWorld menjadi komponen slot

HelloWorld.vue

<script setup lang="ts">
import { ref } from &#39;vue&#39;;

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

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

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

index.ts

<script>
import { h } from &#39;vue&#39;

import HelloWorld from &#39;./HelloWorld.vue&#39;

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

Akhir pemaparan Seperti berikut

Atas ialah kandungan terperinci Cara menggunakan fungsi h dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!