Eine detaillierte Diskussion der Komponenten in Vue

Eine detaillierte Diskussion der Komponenten in Vue

1. Komponentenregistrierung

Bei der Registrierung von Komponenten sind fünf Punkte zu beachten:

1. Daten sollten als Funktion geschrieben werden und einen Wert mit return zurückgeben, damit sich verschiedene Aufrufe nicht gegenseitig beeinflussen

2. Auf das Wort Template folgt eine Gleitkommazahl, die den Schlüssel über Tab darstellt.

3. Der Inhalt nach der Vorlage sollte in einem großen Div geschrieben werden, nicht in mehrere Divs aufgeteilt

4. Das Folgende ist ein Array, da es viele Requisiten gibt

5. Als JS-Datei speichern

Vue.Komponente("myson",{
	Daten(){
		zurückkehren {
			sonmsg:"hallo Sohn"
		}
	},
	Vorlage:`
	<div>
		<p>Unterkomponenteninhalt</p>
		Der von prop empfangene Wert: {{sonprop}}
	</div>
	`,
	Requisiten:["sonprop"],
	Methoden:{
		sonclick(){
			dies.$emit("sonemit",dies.sonmsg)
		}
	}
})

2. Verwendung von Komponenten

Achten Sie bei der Verwendung nur auf eines: Sie müssen zuerst auf Vue und dann auf die Unterkomponente verweisen.

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="00-component-child.js"></script>
	</Kopf>
	<Text>
		<div id="app">
			<mein Sohn></mein Sohn>
		</div>
		<Skripttyp="text/javascript">
			var vm = neuer Vue({
				el:"#app",
				Daten:{
					parentmsg:"parentmsg an sonprop"
				}
			})
		</Skript>
	</body>
</html>

3. Vom Vater zum Sohn

Die Vater-Sohn-Vererbung ist relativ einfach und gliedert sich in zwei Schritte.

1. Definieren Sie Requisiten in Komponenten

Requisiten:["sonprop"]

2. Wenn Sie eine Komponente verwenden, binden Sie den Wert des übergeordneten Elements an die definierte Eigenschaft

<myson :sonprop="parentmsg"></myson>

Der Wert im übergeordneten Element sieht folgendermaßen aus

				Daten:{
					parentmsg:"parentmsg an sonprop"
				}

Der detaillierte Übertragungsprozess ist wie folgt. Es sieht kompliziert aus, besteht aber eigentlich nur aus den beiden oben genannten Schritten.

4. Vom Sohn zum Vater

Die untergeordnete Komponente übergibt den Wert über eine Methode an die übergeordnete Komponente. Die übergeordnete Komponente und die untergeordnete Komponente definieren jeweils eine Methode und verwenden dann eine Zwischenmethode zum Herstellen einer Verbindung. Denken Sie einfach an die Verwendung dieser Zwischenmethode. Es sind ziemlich viele Schritte erforderlich, die im Detail aufgeschlüsselt werden müssen.

1. Verwenden Sie ein Klickereignis in der Schaltfläche der Unterkomponentenvorlage

<button @click="sonclick">Schaltfläche</button>

2. Definieren Sie die oben verwendete Methode in der Unterkomponente, lösen Sie eine Zwischenmethode aus und übergeben Sie Daten

		sonclick(){
			dies.$emit("sonemit",dies.sonmsg)
		}

3. Wenn das übergeordnete Element die untergeordnete Komponente verwendet, verwenden Sie die Zwischenmethode, um seine eigene Methode zu binden

<myson @sonemit="parentclick"></myson>

4. Empfangen Sie Daten in der übergeordneten Methode, wobei p als beliebiges Zeichen geschrieben werden kann

        übergeordneter Klick(p){
			vm.parentmsg=p;
		}

Detailliertes Codediagramm

Wirkung der Operation

5. Spielautomaten

1. Slots hinzufügen. Ein Slot ist ein Bereich in einer Komponente, in den Sie bei Verwendung der Komponente alles einfügen können.

Definieren Sie irgendwo in der Unterkomponente: <slot></slot>

Wenn Sie die Komponente verwenden, können Sie an dieser Stelle ein beliebiges Etikett hinzufügen

2. Wenn Sie mehrere Slots hinzufügen, benennen Sie jeden Slot und fügen Sie jeden Slot bei Verwendung in eine Vorlage ein.

Mehrere Slots definieren

	Vorlage:`
	<div>
		<p>Inhalt der Unterkomponente: {{sonmsg}}</p>
		<p>Trennlinie 111111111111111</p>
		<slot name="a1"></slot>
		<p>Trennlinie 2222222</p>
		<slot name="a2"></slot>
		<p>Trennlinie 333333333</p>
	</div>
	`,

Verwenden Sie mehrere Slots, eine Vorlage für einen Slot

                <Vorlagenslot="a1">
					<button>Schaltfläche a1</button>
				</Vorlage>
				<Vorlagenslot="a2">
					<button>Schaltfläche a2</button>
				</Vorlage>

6. Unterkomponenten übergeben Werte an Slots

1. Definieren Sie die Zwischendaten-Emitmsg in der Unterkomponentenvorlage. Der Name kann beliebig sein.

<slot name="a1" :emitmsg="sonmsg"></slot>

2. Verwenden Sie res zum Empfangen in der übergeordneten Komponente. Unabhängig davon, wie viele untergeordnete Komponenten vorhanden sind, wird res zum Empfangen verwendet. res ist der Ergebnissatz. Wenn mehrere Slots vorhanden sind, befinden sich die Daten darin.

				<template slot="a1" slot-scope="res">
					{{res.emitmsg}}
				</Vorlage>

Code-Schaufenster

Anzeigeeffekt:

Zusammenfassen

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:
  • Detaillierte Erklärung zur Verwendung von Router-View-Komponenten in Vue
  • Detaillierte Erklärung zur Verwendung von Teleport, einer integrierten Komponente von Vue3
  • Eine kurze Diskussion über benutzerdefinierte VUE-Uni-App-Komponenten
  • Eine kurze Einführung in die Basiskomponenten der VUE uni-app
  • Detaillierte Erläuterung des Vue-Entwicklungssortierungskomponentencodes

<<:  CSS legt den Listenstil fest und erstellt den Implementierungscode für das Navigationsmenü

>>:  Detaillierte Erläuterung der MySQL-Sicherungs- und Wiederherstellungspraxis von mysqlbackup

Artikel empfehlen

Mysql setzt Boolesche Typoperationen

Mysql legt den Booleschen Typ fest 1. Tinyint-Typ...

jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird

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

js, um einen coolen Feuerwerkseffekt zu erzielen

In diesem Artikel finden Sie den spezifischen Cod...

Tutorial zur Installation von phpMyAdmin unter Linux centos7

yum install httpd php mariadb-server –y Notieren ...

Beheben Sie den abnormalen Fehler beim Erstellen einer Vue-Umgebung mit Webpack

Inhaltsverzeichnis Konfigurieren Sie zuerst packa...

Erläuterung der Docker Compose-Netzwerkeinstellungen

Grundlegende Konzepte Standardmäßig erstellt Comp...

Tutorial zur Installation und Konfiguration von msmtp und mutt für Raspberry Pi

1. Installieren Sie mutt sudo apt-get install mut...

Div deckt den Blitz ab. Die transparente Flash-Methode ermöglicht die Platzierung der DIV-Ebene auf dem Blitz.

Es gibt zwei Typen: (verschiedene Browser) 1. Verf...

Eine kurze Diskussion des interessanten Boxmodells der CSS3-Boxgrößeneigenschaft

Jeder muss die Zusammensetzung des Boxmodells von...

Eine detaillierte Einführung in die drei Installationsmethoden von RPM, Yum und Quellcode unter Linux

Kapitel 1 Installation des Quellcodes Die Install...

Die vollständigen und inkrementellen Daten einer bestimmten MySQL-Tabelle mit der Nachrichtenwarteschlange synchronisieren - Lösung

Inhaltsverzeichnis 1. Ursprüngliche Nachfrage 2. ...

Informationen zur Layoutmethode für Inhaltsüberlauf in Tabellen

Was ist Inhaltsüberlauf? Wenn tatsächlich viel Te...

Vue implementiert WebSocket-Kundendienst-Chatfunktion

In diesem Artikel wird hauptsächlich die Implemen...

Tutorial zur HTML-Tabellenauszeichnung (5): Farbattribut für helle Rahmen BORDERCOLORLIGHT

In einer Tabelle können Sie die Farbe des oberen ...

Grundlegende Einführung in Echarts: Allgemeine Konfiguration von Balkendiagrammen und Liniendiagrammen

1Grundlegende Schritte von E-Charts Vier Schritte...