Detaillierte Erklärung zur Verwendung der Vue h-Funktion

 // @returns {VNode}
H(
    // {String | Objekt | Funktion}-Tag
    // Ein HTML-Tag-Name, eine Komponente, eine asynchrone Komponente oder // eine funktionale Komponente.
    //
    // Erforderlich.
    'div',

    // {Object} Eigenschaften
    // Objekte, die Attributen, Eigenschaften und Ereignissen entsprechen.
    // Dies wird in der Vorlage verwendet.
    //
    // Optional (Es wird empfohlen, es während der Entwicklung zu übergeben. Wenn es nicht übergeben werden muss, übergeben Sie null.)
    {},

    // {String | Array | Object} untergeordnete Elemente
    // Untergeordnete VNodes, erstellt mit `h()`,
    // Oder verwenden Sie eine Zeichenfolge, um einen „Text-VNode“ oder // ein Objekt mit Slots zu erhalten.
    //
    // Optional.
    [
        'Zuerst kommt ein Text.',
        h('h1', 'Eine Überschrift'),
        h(MeineKomponente, {
            einigeProp: "foobar"
        })
    ]
)

 <Skript>
/* Um den Stil festzulegen, müssen Sie ihn hier importieren. Wenn Sie das Stil-Tag verwenden, können Sie nicht bereichsbezogen schreiben, was dem Festlegen lokaler Stile nicht förderlich ist und daher nicht empfohlen wird*/
importiere "./style.css"
importiere { h, ref } von "vue";

Standard exportieren {
    // So schreiben Sie Daten // data() {
    // zurückkehren {
    // Zähler: 0
    // }
    // },
    aufstellen() {
        konstanter Zähler = ref(0)
        return { Zähler }
    },
    /**
     * Wenn Sie Setup verwenden, können Sie dies auch unten verwenden. Der Import von Render hat diese Grenze, daher sollte der folgende Wert dies verwenden
     */
    rendern() {
        return h("div", null, [
            h("h1", null, `Aktueller Zähler: ${this.counter}`),
            h("Schaltfläche", { bei Klick: () => this.counter++, Klasse: "Schaltfläche" }, "1 hinzufügen"),
            h("Schaltfläche", { bei Klick: () => this.counter--, Klasse: "Schaltfläche" }, "minus 1")
        ])
    }
}
</Skript>

 <Skript>
/* Um den Stil festzulegen, müssen Sie ihn hier importieren. Wenn Sie das Stil-Tag verwenden, können Sie nicht bereichsbezogen schreiben, was dem Festlegen lokaler Stile nicht förderlich ist und daher nicht empfohlen wird*/
importiere "./style.css"
importiere { h, ref } von "vue";

Standard exportieren {
    // So schreiben Sie Daten // data() {
    // zurückkehren {
    // Zähler: 0
    // }
    // },
    aufstellen() {
        konstanter Zähler = ref(0)
        zurückgeben () => {
            return h("div", null, [
                h("h1", null, `Aktueller Zähler: ${counter.value}`),
                h("Schaltfläche", { bei Klick: () => Zähler.Wert++, Klasse: "Schaltfläche" }, "1 hinzufügen"),
                h("Schaltfläche", { beimKlicken: () => Zähler.Wert--, Klasse: "Schaltfläche" }, "minus 1")
            ])
        }
    }
}
</Skript>

 <Skript>
importiere { h, ref } von "vue";
Test aus "./components/Test.vue" importieren
Standard exportieren {
    aufstellen() {
        zurückkehren {}
    },
    rendern() {
        return h(Test, null, {
            // Standard entspricht einer Funktion, Standard ist der Standardsteckplatz Standard: props => h("span", null, "Vom übergeordneten Element an die Komponente übergebener Inhalt:" + props.name)
        })
    }
}
</Skript>

 <Skript>
importiere { h } von "vue";

Standard exportieren {
    /**
     * Erhalte den vom Ehemann übermittelten Inhalt */
    rendern() {
        return h("div", null, [
            h("div", null, "Ich bin eine untergeordnete Komponente"),
            /**
             * Hier können wir beurteilen, ob andere etwas übergeben haben. * Sie können auch null schreiben, um nichts anzuzeigen. * Sie können auch einen Parameter übergeben, indem Sie die Funktion zum Übergeben des Parameters verwenden. */
            this.$slots.default ? this.$slots.default({ name: "哈哈哈哈" }) : h("div", null, "Ich bin der Standardwert der untergeordneten Komponente")
        ])
    }
}
</Skript>

 npm installiere @vue/babel-plugin-jsx -D

 modul.exporte = {
    Voreinstellungen: [
        „@/vue/cli-plugin-babel/Vorgabe“
    ],
    Plugins: [
        „@vue/babel-plugin-jsx“
    ]
}

 <Skript>
importiere { ref } von 'vue'
Standard exportieren {
    aufstellen() {
        lass Zähler = ref(0)
        return { Zähler }
    },
    rendern() {
        zurückkehren (
            <div>
                <div>Verwendung von JSX</div>
                <h2>Aktuelle Nummer: {this.counter}</h2>
            </div>


        )
    }
}
</Skript>

 <Skript>
importiere { ref } von '@vue/reactivity'

Standard exportieren {
    aufstellen() {
        lass Zähler = ref(0)
        Funktion add() {
            Zählerwert++
        }
        Funktion Dekrement() {
            Zählerwert--
        }
        return { Zähler, Addition, Dekrementierung}
    },
    rendern() {
        zurückkehren (
            <div>
                <div>Verwendung von JSX</div>
                <h2>Aktuelle Nummer: {this.counter}</h2>
                <button onClick={this.add}>1 hinzufügen</button>
                <button onClick={this.decrement} >1 verringern</button>
            </div>
        )
    }
}
</Skript>

 <Skript>
importiere { ref } von '@vue/reactivity'
Test aus "./components/Test.vue" importieren
Standard exportieren {
    aufstellen() {
        lass Zähler = ref(0)
        Funktion add() {
            Zählerwert++
        }
        Funktion Dekrement() {
            Zählerwert--
        }
        return { Zähler, Addition, Dekrementierung}
    },
    rendern() {
        zurückkehren (
            <div>
                <div>Verwendung von JSX</div>
                {/* Wenn dieser Block Variablen oder Methoden im Setup verwendet, fügen Sie dies hinzu */}
                <h2>Aktuelle Nummer: {this.counter}</h2>
                <button onClick={this.add}>1 hinzufügen</button>
                <button onClick={this.decrement} >1 verringern</button>
                <hr />
                <Prüfung>
                    {/* Schreibe den übergebenen Inhalt hierhin, d.h. übergebe ihn in einen Slot*/}
                    {{ default: props => <p>Ich werde vom Elternteil an das Kind weitergegeben</p> }}
                </Test>
            </div>
        )
    }
}
</Skript>

 <Skript>
Standard exportieren {
    /**
     * Erhalte den vom Ehemann übermittelten Inhalt */
    rendern() {
        zurückkehren (
            <div>
                <p>Ich bin eine Komponente</p>
                {/* Dieses Teil darf nicht getragen werden, und Sie müssen einen Standardwert anzeigen. In diesem Fall müssen Sie den ternären Operator */} verwenden.
                {this.$slots.default()}
            </div>
        )
    }
}
</Skript>