Detaillierte Erklärung zweier zu beachtender Punkte bei vue3: Setup

Detaillierte Erklärung zweier zu beachtender Punkte bei vue3: Setup

In vue2

Übergeben von Eigenschaften von der übergeordneten Komponente an die untergeordnete Komponente

Bildbeschreibung hier einfügen

Unterkomponenten erhalten Eigenschaften

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Wenn es nicht empfangen wird, muss es in $attrs empfangen werden. Der Nachteil besteht darin, dass es keine Typbeschränkung gibt und der Name bei Verwendung relativ lang ist.

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Der Name ist länger, wenn er verwendet wird

Bildbeschreibung hier einfügen

Vue2, übergeordnete Komponente verwendet Slots in untergeordneten Komponenten

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Drucken Sie den Inhalt eines Slots

Bildbeschreibung hier einfügen

Wenn die übergeordnete Komponente 2 Slots der untergeordneten Komponente verwendet

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Übergeordnete Komponente verwendet benannte Slots in untergeordneten Komponenten

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

In vue3

Hinweise zur Einrichtung

Bildbeschreibung hier einfügen

Der Setup-Lebenszyklus ist vor beforecreated

Bildbeschreibung hier einfügen
Bildbeschreibung hier einfügen

setup kann zwei Parameter erhalten, props und context

Übergeben Sie 2 Eigenschaften an die untergeordnete Komponente

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Druckkontext

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Kontext.attrs

Ähnlich wie bei vue2, wenn nur ein Teil deklariert ist, befindet sich der Rest im attrs-Attribut

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Kontext.emit

Listener-Ereignisse zu untergeordneten Komponenten hinzufügen

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Kontext.Slot

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Wenn Sie einen benannten Slot passieren

Bildbeschreibung hier einfügen

Oder (empfohlen)

Bildbeschreibung hier einfügen

Drucken

Bildbeschreibung hier einfügen

Wenn Sie 2 benannte Slots passieren

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Zusammenfassen

Bildbeschreibung hier einfügen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:
  • Sehr empfehlenswert! Syntax Sugar in Vue 3.2 einrichten
  • Detaillierte Erklärung der Requisiten und Kontextparameter der SetUp-Funktion in Vue3
  • Anwendungsbeispiel eines Setup-Skripts in Vue3
  • Detaillierte Erklärung der Verwendung von SetUp- und Reactive-Funktionen in Vue3
  • Vue3 setup() - Erweiterte Verwendungsbeispiele - ausführliche Erklärung
  • Tutorial zur Front-End-Einrichtung von Vue3

<<:  Lösen Sie das Sprungproblem des mobilen Endgeräts (CSS-Übergang, Ziel-Pseudoklasse).

>>:  Lösung zur automatischen Beendigung von Docker Run-Containern

Artikel empfehlen

HTML-, CSS- und JS-Kompatibilitätsbaum (IE, Firefox, Chrome)

Was ist ein Baum im Webdesign? Einfach ausgedrückt...

Detaillierte Erklärung der KeepAlive-Verwendung in der Vue-Frontend-Entwicklung

Inhaltsverzeichnis Vorwort Keep-Avlive-Hook-Funkt...

So installieren und konfigurieren Sie den Apache-Webserver

Erfahren Sie, wie Sie Ihre eigene Website auf Apa...

Tiefgreifendes Verständnis der Verwendung von Vue

Inhaltsverzeichnis Verstehen Sie das Kernkonzept ...

HTML-Lernhinweise – Detaillierte Erklärung der HTML-Syntax (unbedingt lesen)

1. Was ist die HTML-Auszeichnungssprache? HTML is...

So ändern Sie schnell die Tabellenstruktur einer MySQL-Tabelle

Tabellenstruktur einer MySQL-Tabelle schnell ände...

MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter Windows 10

In diesem Artikel finden Sie das grafische Tutori...

HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots

Code kopieren Der Code lautet wie folgt: <!DOC...

Ausführliche Erklärung des Maximalwerts von int in MySQL

Einführung Ich werde ausführlich über das Problem...

Uniapp WeChat-Applet: Lösung bei Schlüsselfehler

Uniapp-Code <Vorlage> <Ansicht> <i...