Analyse des Unterschieds zwischen Emits und Attrs in Vue3

abschließend

Wenn ein benutzerdefiniertes Ereignis in einer übergeordneten Komponente definiert ist, wird es automatisch an die $attrs der übergeordneten Komponente gebunden, wenn es nicht in der untergeordneten Komponente deklariert ist. Wenn es jedoch in der untergeordneten Komponente deklariert ist, erscheint es nicht in den $attrs der übergeordneten Komponente.

Praxisanalyse

Um den Unterschied zwischen Emittern und Attriben zu überprüfen, konstruieren wir die folgende Komponentenstruktur:

<div>
<com-one-vue/>
</div>
<div>
<com-one-vue/>
</div>

Die spezifischen Vue-Dateien und -Codes sind wie folgt (beachten Sie, dass die folgende Syntax Setup-Syntax-Sugar verwendet):

App.vue

<Vorlage>
<div>
Komponente 1 (mit Fun-Event, aber nicht in Emission deklariert)
<com-one-vue @fun = "anrufen"/>
</div>
<div>
Komponente 1 (plus fun2-Ereignis, in Emittierungen deklariert)
<com-one-vue @fun2 = "anrufen"/>
</div>
</Vorlage>
​
<Skript-Setup>
importiere { provide, ref } von '@vue/runtime-core';
importiere comOneVue aus „./components/comOne.vue“;
importiere comTwoVue aus „./components/comTwo.vue“;
importiere comThreeVue aus „./components/comThreeVue“;
const call = () => {
  konsole.log('xx')
}
</Skript>

comOne.vue

<Vorlage>
    <button @click="f">Hei, ich bin es</button>
</Vorlage>
​
<Skript-Setup>
importiere {useAttrs } von "@vue/runtime-core";
const emits = defineEmits(['fun2'])
const { onFun } = useAttrs()
const f = () => {
    wenn(beiSpaß)
    beiSpaß()
    emittiert('Spaß2')
}
Konsole.log(useAttrs())
</Skript> 

Öffnen Sie dann zu diesem Zeitpunkt die Konsole und wir finden Folgendes:

Da in den beiden Komponenten 1 die benutzerdefinierte Methode fun der ersten Komponente 1 nicht in emits deklariert ist, erscheint onFun in ihren $attrs und ihr Typ ist eine Methode.

In der zweiten Komponente 1 haben wir eine benutzerdefinierte Methode fun2 definiert. Da wir fun2 am Anfang in der untergeordneten Komponente definiert haben, wird fun2 in der zweiten Komponente 1 nicht zu $attrs hinzugefügt.

Beachten Sie, dass, obwohl es sich bei beiden Komponenten um Komponente 1 handelt, ihre benutzerdefinierten Ereignisse sich nicht gegenseitig beeinflussen. Deshalb erscheint die benutzerdefinierte Methode „fun“ nicht in $attrs auf der zweiten Komponente 1.

Gleichzeitig klicken wir auf zwei Schaltflächen und stellen fest, dass sowohl die Methode „fun“ als auch die Methode „fun2“ die Ergebnisse ausdrucken.

In diesem Fall gibt es also keinen Unterschied in der Wirkung dieser beiden Verwendungen.

Erweiterungen

Durch die Demo gerade verstehen wir die Unterschiede in der Verwendung und einige Details von Emits und Attrs, aber in den meisten Fällen gibt es tatsächlich keinen Unterschied zwischen den Funktionen der beiden. Wie sollten wir sie also verwenden?

Zunächst werden Emittierungen zuerst in der untergeordneten Komponente deklariert und von der übergeordneten Komponente referenziert, während Attribute zuerst von der übergeordneten Komponente an die untergeordnete Komponente angepasst werden und die untergeordnete Komponente sie verwendet, indem sie die Attribute der übergeordneten Komponente anzeigt. Dieser Unterschied ermöglicht es uns, basierend auf der Nutzung und den Merkmalen eines Ereignisses zu entscheiden, welche Methode zu verwenden ist:

• Wenn eine Komponente häufig über benutzerdefinierte Ereignisse mit ihrer übergeordneten Komponente kommunizieren muss, können Sie Emits verwenden.
• Wenn eine übergeordnete Komponente möglicherweise, aber nicht häufig, über benutzerdefinierte Ereignisse mit untergeordneten Komponenten kommunizieren muss, können Attribute verwendet werden. Beachten Sie jedoch, dass die übergeordnete Komponente möglicherweise nicht über benutzerdefinierte Ereignisse mit der untergeordneten Komponente kommuniziert. Daher muss ermittelt werden, ob entsprechende Attribute vorhanden sind (andernfalls tritt ein undefinierter Fehler auf).

Werfen wir einen Blick auf die offiziellen Ansichten zu diesen beiden Verwendungszwecken:

Es wird dringend empfohlen, Emitter zu verwenden, um alle von jeder Komponente ausgelösten Ereignisse aufzuzeichnen.
Dies ist besonders wichtig, da wir den Modifikator .native entfernt haben. Alle Ereignis-Listener, die nicht in Emittierungen deklariert sind, werden in den $attrs der Komponente gezählt und standardmäßig an den Stammknoten der Komponente gebunden.

In Vue3 werden nach dem Entfernen des Modifikators .native tatsächlich alle Ereignisse in den Attributen der Komponente aufgezeichnet, unabhängig davon, ob es sich um eine benutzerdefinierte Komponente handelt oder nicht. wie folgt:

Wenn Sie zwischen Ihren eigenen benutzerdefinierten Ereignissen und nativen Ereignissen unterscheiden müssen, verwenden Sie am besten Emits, um die von den einzelnen Komponenten ausgelösten Ereignisse zu definieren. Gleichzeitig werden tatsächlich alle Ereignisse, sofern sie nicht in Emittierungen deklariert sind, standardmäßig an die Attribute der übergeordneten Komponente gebunden und sind nicht auf benutzerdefinierte Ereignisse beschränkt.

Zusammenfassen

Dies ist das Ende dieses Artikels über den Unterschied zwischen Emits und Attrs in Vue3. Weitere Informationen zum Unterschied zwischen Emits und Attrs in Vue3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!