Comment utiliser la fonction h dans Vue3-Voir.js-php.cn

Comment utiliser la fonction h dans Vue3

WBOY

Libérer： 2023-05-12 22:16:10

avant

3154 Les gens l'ont consulté

Introduction

Comme nous le savons tous, ce qui est construit dans vue est en fait un DOM virtuel, et le DOM virtuel est généré par un nœud virtuel. En fait, le nœud virtuel est un objet js
En fait, le modèle que nous écrivons dans vue , et enfin le VNode correspondant est généré via la fonction de rendu. La fonction h est une fonction utilisée pour générer un VNode. Son nom complet est createVNode. Il est simplement utilisé
.

est une chaîne, c'est obligatoire

Cette chaîne peut être un nom de balise html, un composant, un composant asynchrone ou un composant fonction

Comment utiliser la fonction h dans Vue3

Le deuxième paramètre

est un objet , l'objet facultatif
correspondant à l'attribut, à l'accessoire et à l'événement

Le troisième paramètre

peut être une chaîne, un tableau ou un objet
C'est des VNodes, utilisez la fonction h pour créer

Utilisez

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

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

</script>

Copier après la connexion

L'effet de rendu est le suivant

Bien sûr, nous pouvons également utiliser la fonction rener pour rendre

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

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

Copier après la connexion

Counter

<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>

Copier après la connexion

est rendu comme suit

Avancé utilisation de

composant de fonction Comment utiliser la fonction h dans Vue3

Nous écrivons d'abord un composant HelloWorld.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>

Copier après la connexion

Ensuite, nous introduisons ce composant dans la fonction h, et il sera rendu

<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>

Copier après la connexion

Comment utiliser la fonction h dans Vue3

insérer un emplacement

la fonction h prend également en charge les emplacements. Nous a changé le composant HelloWorld en composant 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>

Copier après la connexion