Tiefgreifendes Verständnis des Slot-Scopes in Vue (für Anfänger geeignet)
|
Es gibt bereits viele Artikel über Slot-Scope auf Baidu, aber ich habe das Gefühl, dass sie alle von Leuten stammen, die es vorher nicht gut gelernt haben und es erneut lernen. Sie alle verwenden .Vue-Dateien, was meiner Meinung nach nicht für Anfänger geeignet ist, daher werde ich einen Artikel schreiben, der für Anfänger geeignet ist. Erste Wurfroutine:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Komponenten, die Inhalte über Slots verteilen</title>
<script src="Ihre Vue-Adresse, bitte laden Sie die neueste Version herunter"></script>
<Skript>
Vue.component("Test-Slot",{
// Slots ermöglichen eine Standardinhaltsvorlage:
`<div>
Fehler!
<Steckplatz></Steckplatz>
</div>
`,
Daten:Funktion () {
zurückkehren {
Name: „Perry“
}
}
});
// Benannter Slot Vue.component("slot-name",{
Vorlage:
`<div>
<Kopfzeile>
<slot name="header"></slot>
</header>
<Haupt>
<Steckplatz ></Steckplatz>
</main>
<Fußzeile>
<slot name="Fußzeile"></slot>
</Fußzeile>
</div>
`
});
// Bereichsslot Vue.component("todo-list",{
inheritAttrs:false,
Requisiten:{
todos:[Array,Objekt]
},
Vorlage:
`<ul>
<li v-for="todo in todos" :key="todo.id" style="display: block;" >
<slot :data="todo">{{todo.text}}</slot>
</li>
</ul>
`
});
</Skript>
<Stil>
li{
Listenstil: keiner;
Anzeige: Inline-Block;
Schriftgröße: 25px;
}
</Stil>
</Kopf>
<Text>
<div id="app">
<!--1. Der Slot-Inhalt kann beliebige Inhalte, Codes und Komponenten aufnehmen-->
<test-slot>Etwas Schlimmes ist passiert. Wer bist du? Kenne ich dich?</test-slot>
<Test-Slot>
Es ist etwas Schlimmes passiert.
<!--Variablen sind zulässig, müssen aber in diesem Bereich liegen, um wirksam zu sein. Hier lautet der Wert von name "叉道口"-->
<h3>Titel {{name}}</h3>
<img src="img/flower.jfif" alt="Bild kann nicht angezeigt werden">
</Test-Slot>
<!--2. Der benannte Slot slo hat ein spezielles Attribut namens, das den Slot benennen kann-->
<Steckplatzname>
<h3>Lernen fördern</h3>
<p>Wer in jungen Jahren nicht hart arbeitet, wird es im Alter bereuen</p>
<p>Die Zeit vergeht wie im Flug</p>
<template slot="header">
<ul>
<li>Startseite</li>
<li>Wurde auch Zeit</li>
<li>Über das Leben</li>
<li>Über die Zukunft</li>
</ul>
</Vorlage>
<p>Hallo</p>
<p slot="Fußzeile">
<p>Ende</p>
<p>ICP-Nummer 6545646456415</p>
</p>
</slot-name>
<!--Slots mit begrenztem Gültigkeitsbereich verwenden, implementiert über Slot-Scope -->
<Aufgabenliste :todos="Aufgaben">
<template slot-scope="slotProps">
<span v-if="slotProps.data.isTrue">√</span>
{{slotProps.data.text}}
</Vorlage>
</todo-list>
<!--ES2015-Struktursyntax verwenden-->
<Aufgabenliste :todos="Aufgaben">
<template slot-scope="{data}">
<span v-if="data.isTrue">√</span>
{{data.text}}
</Vorlage>
</todo-list>
</div>
<Skript>
neuer Vue({
el:"#app",
Daten:{
Name:"Kreuzung",
alle Aufgaben:
{text:"A",id:1,isTrue:true},
{text:"B",id:2,isTrue:true},
{text:"C",id:3,isTrue:false},
{text:"D",id:4,isTrue:true},
],
// slotProps: ""
}
})
</Skript>
</body>
</html>
Das Beispiel beschreibt auch normale Slots und benannte Slots, auf die ich hier nicht näher eingehen werde. Ich werde nur über Slots mit Gültigkeitsbereich sprechen. Beginnen wir zunächst mit dem Namen „Scope Slot“. Ursprünglich konnte Ihre übergeordnete Komponentenvorlage die Daten in der untergeordneten Komponentenvorlage nicht verwenden. Auf der offiziellen Website wird ein besonderer Schwerpunkt gesetzt: Alles in der übergeordneten Komponentenvorlage wird im übergeordneten Bereich kompiliert; alles in der untergeordneten Komponentenvorlage wird im untergeordneten Bereich kompiliert. Dieser Satz ist eigentlich ziemlich schwer zu verstehen. Nehmen wir zum Verständnis ein Beispiel.
<Test-Slot>
Es ist etwas Schlimmes passiert.
<!--Variablen sind zulässig, müssen aber in diesem Bereich liegen, um wirksam zu sein. Hier lautet der Wert von name "叉道口"-->
<h3>Titel {{name}}</h3>
<img src="img/flower.jfif" alt="Bild kann nicht angezeigt werden">
</Test-Slot>
Dies ist mein obiges Beispiel, was bedeutet, dass der Name hier in der aktuellen Komponente enthalten sein muss und nicht die Daten innerhalb der Test-Slot-Komponente sein können. Dies ist die Gültigkeitsbereichsbeschränkung. Die Namensdaten gehören zum Gültigkeitsbereich der übergeordneten Komponente, es können also nur die Daten der übergeordneten Komponente sein. Das Aufkommen des Slot-Scope ermöglicht es der übergeordneten Komponente jedoch, die Daten innerhalb der untergeordneten Komponente aufzurufen, und die Daten der untergeordneten Komponente werden über das Slot-Scope-Attribut an die übergeordnete Komponente übergeben
// Bereichsslot Vue.component("todo-list",{
inheritAttrs:false,
Requisiten:{
todos:[Array,Objekt]
},
Vorlage:
`<ul>
<li v-for="todo in todos" :key="todo.id" style="display: block;" >
//Hier: data="todo" bedeutet, dass die To-Do-Daten der untergeordneten Komponente an die übergeordnete Komponente übergeben werden<slot :data="todo">{{todo.text}}</slot>//todo.text ist der Standardwert, die übergeordnete Komponente wird ihn überschreiben</li>
</ul>
`
});
<!--Slots mit begrenztem Gültigkeitsbereich verwenden, implementiert über Slot-Scope -->
<Aufgabenliste :todos="Aufgaben">
<template slot-scope="slotProps">
<span v-if="slotProps.data.isTrue">√</span>
{{slotProps.data.text}}
</Vorlage>
</todo-list>
So wird es verwendet. Die Daten mit dem Namen data und dem Wert todo, die von der untergeordneten Komponente übergeben werden, werden vom Slot-Bereich empfangen. Es ist zu beachten, dass der Slot-Bereich ein Objekt empfängt, das hier slotProps heißt. Dies bedeutet, dass die von Ihnen übergebenen Daten als Eigenschaft von slotProps verwendet werden. Daher ist slotProps.data erforderlich, um Daten aufzurufen. Wie bereits erwähnt, ist der Wert von Daten „todo“. Was ist „todo“? Todo wird von Todos durchlaufen und ist daher ein Objekt.
neuer Vue({
el:"#app",
Daten:{
Name:"Kreuzung",
alle Aufgaben:
{text:"A",id:1,isTrue:true},
{text:"B",id:2,isTrue:true},
{text:"C",id:3,isTrue:false},
{text:"D",id:4,isTrue:true},
],
// slotProps: ""
}
});
Wir haben die Slot-Scope-Funktion verstanden. Was sind also ihre Anwendungsszenarien? Wir können uns vorstellen, dass jemand eine Komponente geschrieben hat, die gekapselt wurde, aber er denkt, dass der Anzeigestil der Daten vom Benutzer definiert werden sollte. Genau wie oben hoffen wir, dass der Stil der Liste vom Benutzer definiert wird. Ich habe beispielsweise ein √-Zeichen hinzugefügt. Zu Beginn übergeben wir die Ausgangsdaten, aber die Daten müssen von der Unterkomponente verarbeitet werden. Die Person, die die Komponente geschrieben hat, muss die verarbeiteten Daten anzeigen wollen. Zu diesem Zeitpunkt ist der Slot-Scope äußerst wichtig. Zusammenfassen Damit ist dieser Artikel zum vertieften Verständnis des Slot-Scopes in Vue abgeschlossen. Weitere Informationen zum Verständnis des Vue-Slot-Scopes finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Detailliertes Beispiel zum Erstellen und Löschen von Tabellen in MySQL
Artikel empfehlen
Zusammenfassung der Tipps zum Festlegen der maximalen Anzahl von Verbindungen in MySQL
Methode 1: Befehlszeilenänderung Wir müssen nur d...
Fallstudie zu JavaScript Anti-Shake
Prinzip Das Prinzip von Anti-Shake ist: Du kannst...
Detaillierte Erläuterung der MySQL 8.0-Wörterbuchtabellenerweiterung
Das Datenwörterbuch in MySQL ist eine der wichtig...
Lösen Sie das domänenübergreifende Problem von Vue + SpringBoot + Shiro
Inhaltsverzeichnis 1. Konfigurieren Sie das Vue-F...
Detaillierte Erklärung der JS-Ereignisdelegation
1. Jede Funktion ist ein Objekt und belegt Speich...
Der Unterschied und die Wahl zwischen Datum und Uhrzeit und Zeitstempel in MySQL
Inhaltsverzeichnis 1 Unterschied 1.1 Raumbelegung...
Detaillierte Analyse des Flex-Layouts in CSS3
Das Flexbox-Layoutmodul soll eine effizientere Mö...
Windows verhindert, dass der Remote-Desktop für längere Zeit automatisch getrennt wird
Jeder, der schon einmal Windows Remote Desktop zu...
So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop
Inhaltsverzeichnis Vorwort 1. Technisches Prinzip...
Zusammenfassung der Situationen, in denen MySQL-Indizes nicht verwendet werden
Indextypen in MySQL Im Allgemeinen können sie in ...
CSS realisiert den Maskeneffekt, wenn die Maus über das Bild bewegt wird
1. Setzen Sie den HTML-Code der Maskenebene und d...
Grafisches Tutorial zur Konfigurationsmethode für die Installationsversion von MySQL5.7.17 winx64 unter Windows Server 2008 R2
Installieren Sie mysql5.7 unter Win. Zu Ihrer Inf...
Detaillierte Erläuterung der grundlegenden Verwendung der CentOS7-Firewall unter Linux
1. Grundlegende Verwendung von Firewalld Start-up...
Wird der Index in der MySQL-Abfragebedingung verwendet?
Wenn Sie ein Arbeitgeber fragt, ob in einer MySQL...
Grafische Erklärung des Funktionsaufrufs der Protodatei in Vue
1. Proto kompilieren Erstellen Sie einen neuen Pr...