So verwenden Sie die h-Funktion in Vue3

Einführung

• Wie wir alle wissen, ist das, was in Vue erstellt wird, tatsächlich ein virtuelles DOM, und das virtuelle DOM wird von einem virtuellen Knoten generiert. Tatsächlich ist der virtuelle Knoten ein js-Objekt

• Tatsächlich. Die Vorlage, die wir in vue schreiben, und schließlich die Funktion h, die zum Generieren von VNode verwendet wird, ist einfach der erste Parameter

• ist eine Zeichenfolge, sie ist erforderlich

Diese Zeichenfolge kann ein HTML-Tag-Name, eine Komponente, eine asynchrone Komponente oder eine Funktionskomponente sein

Der zweite Parameter

ist ein Objekt , das optionale Objekt, das Attribut, Requisite und Ereignis entspricht

• Verwenden Sie

  <script>
  import { h } from &#39;vue&#39;
  
  export default {
      setup() {
          return () => h("h3", null, "Hello World")
      }
  }
  
  </script>

  Der Rendereffekt ist wie folgt:
Natürlich können wir auch die Rener-Funktion zum Rendern verwenden:

Erweiterte Verwendung von

Funktionskomponente

Wir schreiben zuerst eine Komponente HelloWorld.vue

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

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

• Dann führen wir diese Komponente in die h-Funktion ein und sie wird gerendert

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

  
• Slot einfügen

  h-Funktion unterstützt auch Slots. Wir hat die HelloWorld-Komponente in eine Slot-Komponente geändert

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>

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)])
    }
}
</script>

Das endgültige Rendering ist wie folgt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die h-Funktion in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!