Dynamische Vue-Komponente

1. Komponente

So implementieren Sie dynamisches Komponenten-Rendering

vue bietet eine integrierte <component> , die speziell zum Rendern dynamischer Komponenten verwendet wird.

Dieses Tag entspricht einem Platzhalter und Sie müssen das Attribut is verwenden, um die gebundene Komponente anzugeben

<button @click="comName = 'Left'">Links anzeigen</button>

<button @click="comName = 'Right'">Rechts anzeigen</button>



<div Klasse="Box">

	<!-- Rendert die linke Komponente und die rechte Komponente-->

	<!-- Komponente ist in Vue integriert -->

	<!-- gibt den Namen der zu rendernden Komponente an-->

	<Komponente: ist = "comName"></Komponente>

</div>

<Skript>

	importiere Left von '@/compeonents/Left.vue'

	importiere Right aus '@/components/Right.vue'



	Standard exportieren {

		Komponenten:

			Links,

			Rechts

		},

		Daten() {

			zurückkehren {

				//comName gibt den Namen der anzuzeigenden Komponente an comName: Left,

			}

		}

	}

</Skript> 

2. Keep-Alive-Modus

2.1 Probleme

Wenn eine Schaltfläche „plus eins“ in der Left Komponente implementiert ist, wird die Komponente nach der Plus-Eins-Operation umgeschaltet und dann zurückgeschaltet.

Das Folgende ist eine Funktion, die zu Left hinzugefügt wurde

<div Klasse="linker-Container">

	<h3>Linke Komponente----{{ count }}</h3>

	<button @click="Anzahl += 1">+1</button>

</div>

<Skript>

	Standard exportieren {

		Daten(){

			zurückkehren {

				Anzahl: 0

			}

		}

	}

</Skript>

Wechseln Sie nach dem Hinzufügen einer zur right Komponente und dann zurück. Es wird festgestellt, dass die Daten in der Komponente neu geschrieben und initialisiert wurden.

Zeigen Sie die Left Komponente mithilfe des Lebenszyklus von Vue an

Das Folgende ist die Lebenszyklusfunktion, die zu Left hinzugefügt wurde

Standard exportieren {

	erstellt() {

		console.log('Linke Komponente erstellt!')

	},

	zerstört(){

		console.log('Linke Komponente ist zerstört~')

	}

}

Nach der erneuten Ausführung des Einspruchsvorgangs lauten die Ergebnisse wie folgt:

Problem: Beim Wechseln von Komponenten werden Komponenten gleichzeitig zerstört und erstellt. Wenn Sie also jedes Mal zur gleichen Komponente wechseln, ist das erhaltene Komponentenobjekt nicht dasselbe und die Initialisierungsdaten werden überschrieben

2.2 Verwenden Sie Keep-Alive zur Lösung

Die keep-alive Komponente ist ebenfalls eine integrierte Komponente von Vue und kann direkt verwendet werden

Ändern Sie die App-Stammkomponente wie folgt:

<am Leben erhalten>

	<!-- Keep-Alive kann interne Komponenten zwischenspeichern, anstatt sie zu zerstören -->

	<Komponente: ist = "comName"></Komponente>

</am Leben erhalten> 

2.3Keep-Alive-Lebenszyklus

Dieser Lebenszyklus kann nur verwendet werden, wenn die Komponente keep-alive verwendet.

deactivated wird automatisch ausgelöst, wenn die Komponente zwischengespeichert wird

actived wird automatisch ausgelöst, wenn die Komponente aktiviert wird.

Fügen Sie der Left Komponente die folgenden Änderungen hinzu

//Wenn eine Komponente zum ersten Mal erstellt wird, wird zuerst „created“ (erstellt) und dann „activated“ (aktiviert) ausgelöst.

//Wenn die Komponente aktiviert wird, wird nur die Aktivierung ausgelöst, nicht die Erstellung

aktiviert() {

	console.log('Die Komponente ist aktiviert, aktiviert')

},

deaktiviert(){

	console.log('Die Komponente ist zwischengespeichert, deaktiviert')

} 

2.4 Keep-Alive-Eigenschaften einschließen und ausschließen

Standardmäßig speichert keep-alive alle Komponenten in component im Cache keep-alive

So geben Sie die Komponenten an, die zwischengespeichert werden müssen:

Verwenden Sie include / exclude -Attribute. Die gleichzeitige Verwendung ist nicht möglich.

<keep-alive include="Links,MeinRechts">

	<Komponente: ist = "comName"></Komponente>

</am Leben erhalten>

Oben wird der Name der Komponente angegeben, die zwischengespeichert werden muss: Notieren Sie hier den Namen der Komponente

In der linken Komponente:

Standard exportieren{}

In der rechten Komponente:

Standard exportieren{

	//Wenn das Namensattribut angegeben ist, ist der Name der Komponente der Wert des Namensattributs: „MyRight“

}

Unterscheiden: die Beziehung zwischen dem Namensattribut in der Komponente und dem registrierten Namen außerhalb der Komponente

Außerhalb der Komponente:

Importiere Links '@/components/Left.vue'

Komponenten:

	Links,

}

Der hier registrierte Name wird nur zum Verweisen auf die Komponente verwendet. Wenn in der Komponente kein name vorhanden ist, wird name standardmäßig der registrierte Name verwendet.

Innerhalb der Komponente:

Standard exportieren{

	//Wenn das Namensattribut angegeben ist, ist der Name der Komponente der Wert des Namensattributs: „MyRight“

}

name wird in der Komponente deklariert. Der Name wird in der Beschriftung verwendet, die im Debugging-Tool angezeigt wird, und die Cache-Funktion in der Beschriftung verwendet ebenfalls den Namen.

Dies ist das Ende dieses Artikels über dynamische Vue-Komponenten. Weitere verwandte Inhalte zu dynamischen Vue-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!