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

So ändern Sie die Farbe der gesamten Zeile (tr), wenn die Maus in HTML stoppt

Verwenden Sie reines CSS, um die Hintergrundfarbe...

Teilen Sie einen auf Ace basierenden Markdown-Editor

Ich denke, Editoren lassen sich in zwei Kategorie...

Tutorial zur Installation und Konfiguration von MySQL 5.7 unter CentOS7 (YUM)

Installationsumgebung: CentOS7 64-Bit, MySQL5.7 1...

Detaillierte Erklärung der JavaScript-Prototypenkette

Inhaltsverzeichnis 1. Konstruktoren und Instanzen...

Zusammenfassung der grundlegenden Verwendung des $-Symbols in Linux

Linux-Version: CentOS 7 [root@azfdbdfsdf230lqdg1b...

So stellen Sie Redis schnell als Docker-Container bereit

Inhaltsverzeichnis Erste Schritte Datenspeicherun...

Tomcat erhält den Clientdomänennamen des Nginx-Reverse-Proxys

Frage Nach dem Nginx-Reverse-Proxy erhält die Tom...

Detaillierte Erklärung zum effizienten MySQL-Paging

Vorwort Normalerweise wird für MySQL-Abfragen mit...

So implementieren Sie Reaktionsfähigkeit beim Lernen des Vue-Quellcodes

Inhaltsverzeichnis Vorwort 1. Schlüsselelemente e...

Vues Render-Funktion

Inhaltsverzeichnis 1. Knoten, Bäume und virtuelle...

Implementierung integrierter Module und benutzerdefinierter Module in Node.js

1. Commonjs Commonjs ist ein benutzerdefiniertes ...

Beispiel für die Verwendung des href-Attributs und des onclick-Ereignisses eines Tags

Das „a“-Tag wird hauptsächlich verwendet, um Seit...

Zusammenfassung der Anwendung von Übergangskomponenten in Vue-Projekten

​Transtion in Vue ist eine Kapselungskomponente f...