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

Detaillierte Erklärung zur Verwendung von Element-Plus in Vue3

Inhaltsverzeichnis 1. Installation 2. Importieren...

Lösung für das Problem, dass der Docker-Container nicht gestoppt werden kann

Die Lösung lautet wie folgt: 1. Container löschen...

MySQL-Benutzer und -Berechtigungen und Beispiele zum Knacken des Root-Passworts

MySQL-Benutzer und -Berechtigungen In MySQL gibt ...

Einführung in Abfragebefehle für gespeicherte MySQL-Prozeduren

Wie unten dargestellt: Wählen Sie den Namen aus m...

Installationshinweise zur komprimierten Version von MySQL 5.7.17

In diesem Artikel werden die Installationsschritt...

So verwenden Sie tcpdump zum Erfassen von Paketen im Linux-System

Lassen Sie mich zunächst einen Blick auf den Beis...

Vue.js implementiert eine Timeline-Funktion

In diesem Artikel wird der spezifische Code von V...

Detaillierte Beschreibung der Funktion von new in JS

Inhaltsverzeichnis 1. Beispiel 2. Erstelle 100 So...