Vue3 basierend auf der Skript-Setup-Syntax $refs-Verwendung

1. Vue2-Syntax

Nachdem das Ref-Attribut für die Komponente in der Vue2-Syntax festgelegt wurde, kann über den Wert this.$refs.ref im Code auf die entsprechende Unterkomponente zugegriffen werden.

Eine Komponente, die einen Referenzwert festlegt:

<base-input ref="BenutzernameInput"></base-input>

Im js-Code können Sie über den folgenden Code auf diese Komponente zugreifen:

dies.$refs.usernameInput

Sie können die Methode darin aufrufen:

// Angenommen, die Basis-Eingabekomponente hat die Methode foo
 
dies.$refs.usernameInput.foo();

Detaillierte Informationen zur Verwendung finden Sie in den unten aufgeführten Referenzartikeln.

2. Nutzung von Vue3

Ich habe im Internet vereinzelt Artikel gefunden, und keiner davon hat funktioniert, nachdem ich sie ausprobiert hatte. Aus diesen Artikeln habe ich jedoch einige wichtige Informationen gewonnen und schließlich die folgenden Schritte herausgefunden:

1. Setzen Sie den Referenzwert der Komponente

Dies ähnelt vue2, wo die übergeordnete Komponente den Referenzwert beim Aufrufen der untergeordneten Komponente festlegt.

<ChildVue ref="childRef" />

2. Komponenteninstanzen abrufen

Nachdem die Einstellung abgeschlossen ist, kann vue3 über die Ref-Methode abgerufen werden.

const childRef = ref();

Der Name der Variablen muss hier mit ref übereinstimmen. So drucken Sie childRef direkt. Dieses Mal wird es sein:

undefiniert

Da die Seitenkomponente noch nicht gemountet wurde, muss sie gemountet werden, bevor sie normal verwendet werden kann.

beimMounted(() => {
    Konsole.log(childRef.value); // Proxy {…}
});

3. Öffentliche Variablen in Unterkomponenten festlegen

Nachdem Sie in Schritt 2 oben die Unterkomponenteninstanz erhalten haben, können Sie die Methoden in der Unterkomponente nicht verwenden, da die Komponente, die script setup verwendet, standardmäßig geschlossen ist. Wenn Sie sie öffentlich machen müssen, müssen Sie defineExpose verwenden.

// Unterkomponentencode const foo = () => {
  Konsole.log("foo");
}
definierenExpose({
  foo
});

Aufruf im übergeordneten Bauteil:

// Rufen Sie die Methode der untergeordneten Komponente auf childRef.value.foo(); // foo

Auf diese Weise können Sie die Methode der Unterkomponente aufrufen.

Schauen Sie sich childRef.value an und Sie können die öffentliche foo-Methode sehen:

Übergeordnete Vue3-Komponente ruft Methode der untergeordneten Komponente auf

Vollständiger Referenzcode:

Übergeordnete Komponente:

<Vorlage>
    <ChildVue ref="childRef" />
</Vorlage>
 
<script setup lang="ts">
importiere { ref } von '@vue/reactivity';
importiere { onMounted } von '@vue/runtime-core';
importiere ChildVue aus „./Child.vue“;
 
const childRef = ref();
console.log(childRef.value); // undefiniert
 
beimMounted(() => {
    Konsole.log(childRef.value); // Proxy {…}
    // Rufen Sie die Methode der untergeordneten Komponente auf childRef.value.foo(); // foo
});
</Skript>
 
<Stil>
</Stil>

Unterkomponenten:

<template>Untergeordnete Demo</template>
 
<script setup lang="ts">
const foo = () => {
  Konsole.log("foo");
}
definierenExpose({
  foo
});
</Skript>
 
<Stil>
</Stil>

Dies ist das Ende dieses Artikels über die Verwendung von $refs basierend auf der Skript-Setup-Syntax in Vue3. Weitere Informationen zur Verwendung von $refs in Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!