Detaillierte Erläuterung der benutzerdefinierten Ereignisinhaltsverteilung von Vue
|
1. Dies ist etwas kompliziert zu verstehen. Ich hoffe, Sie können das Prinzip sorgfältig lesen und selbst eingeben:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</Kopf>
<Text>
<div id="app">
<zu erledigen>
<xian slot="xian" :title="Titel"></xian>
// Es wird empfohlen, von hinten nach vorne zu lesen und zu verstehen, dass der durchlaufene Wert v-bind zugewiesen wird und der Wert von v-bind dem gleichnamigen Wert in den Requisiten zugewiesen wird // [Erinnerung] v-on: Der gebundene benutzerdefinierte Ereignisname wird automatisch in Kleinbuchstaben umgewandelt. Wenn jemand einen Ereignisnamen in Großbuchstaben verwendet, wird das folgende this.$emit immer noch in Großbuchstaben umgewandelt und bindet nicht <yu slot="yu" v-for="(item,index) in items"
v-bind:item="Artikel" v-bind:index="Index"
v-on:remove="deleteItems(index)"></yu>
// Die Vue-Instanz bindet Daten und Methoden an die Ansichtsebene, und die Ansichtsebene verteilt diese Daten und Methoden zur Bindung an die darunter liegenden Komponenten. Die Ansicht entspricht der Übertragung der Daten und Methoden der Vue-Instanz zur Steuerung an die Komponenten</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skript>
Vue.component("todo",{
Vorlage: '<div>\
<slot name="xian"></slot>\
<ul>\
<slot name="yu"></slot>\
</ul>\
</div>'
});
Vue.Komponente("xian",{
Requisiten: ['Titel'],
Vorlage: '<div>{{title}}</div>'
});
Vue.component("yu",{// props ist der Parametername, ähnlich dem Variablennamen, der nach Belieben definiert werden kann. v-bind bindet an die Variable, nämlich die Daten und die definierten Variablen-Props: ['item', 'index'],
// Kann nur die Methode der aktuellen Komponentenvorlage binden: '<li>{{index}}---->{{item}}<button @click="remove">löschen</button></li>',
Methoden: {
entfernen: Funktion (Index) {
// this.$emit benutzerdefinierte Ereignisverteilung // [Hinweis] this.$emit('Ereignisname') sollte Kebab-Case (Benennung mit kurzem Bindestrich) verwenden, nicht CamelCased;
dies.$emit('entfernen',index);
}
}
});
var vm = neuer Vue({
el: "#app",
Daten: {
Titel: "Autor",
Elemente: ['Gesalzener Fisch dreht sich 1', 'Gesalzener Fisch dreht sich 2', 'Gesalzener Fisch dreht sich 3']
},
Methoden: {
deleteItems: Funktion (Index) {
console.log("Sie haben "+this.items[index]) gelöscht;
dies.items.splice(index,1);
}
}
});
</Skript>
</body>
</html>
Laufergebnisse:
Wenn wir auf Löschen klicken, können wir jeden Autorennamen löschen. Hier klicke ich auf Löschen, und das Ergebnis ist wie folgt:
2. Hier ist ein Bild zum besseren Verständnis:
Das Verständnis ist wahrscheinlich folgendes: Methoden zwischen Komponenten und Instanzen können nicht interoperabel sein, und der zu löschende Knoten gehört zum Attribut der Instanz. Daher wird durch die Ereignisverteilung die in der Komponente definierte Methode auf die in der Instanz definierte Methode übertragen und dann der Knoten gelöscht. ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können! Das könnte Sie auch interessieren:
|
<<: Ausführen von PostgreSQL in Docker und Empfehlung verschiedener Verbindungstools
>>: Eine kurze Diskussion über die Optimierung von MySQL-Paging für Milliarden von Daten
Artikel empfehlen
MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)
Einige MySQL-Tabellen können doppelte Datensätze ...
CSS realisiert den Maskeneffekt, wenn die Maus über das Bild bewegt wird
1. Setzen Sie den HTML-Code der Maskenebene und d...
Asynchrone Programmierung in Javascript: Verstehen Sie Promise wirklich?
Inhaltsverzeichnis Vorwort Grundlegende Verwendun...
CSS3 realisiert eine springende Ballanimation
Normalerweise besuche ich gerne die Sonderseiten ...
Testen des Hyperlink-Öffnungsziels
Das Zielattribut eines Links bestimmt, wohin der L...
Hinweise zur Verwendung von Textarea
Warum speziell Textbereich erwähnen? Denn der Text...
Mysql GTID Mha-Konfigurationsmethode
Gtid + Mha + Binlog-Serverkonfiguration: 1: Testu...
Berechnete Eigenschaften und Listenerdetails
Inhaltsverzeichnis 1. Berechnete Eigenschaften 1....
Ändern Sie das JVM-Kodierungsproblem, wenn Tomcat ausgeführt wird
Frage: Vor kurzem traten bei der Bereitstellung d...
Praktische Erfahrung mit der Implementierung von Nginx zum Weiterleiten von Anfragen basierend auf URLs
Vorwort Weil dies ein verteiltes Dateisystem ist,...
Lernbeispiel für den Nginx Reverse Proxy
Inhaltsverzeichnis 1. Reverse-Proxy-Vorbereitung ...
9 großartige JavaScript-Framework-Skripte zum Zeichnen von Diagrammen im Web
9 großartige JavaScript-Framework-Skripte zum Zei...
Die Webseite kann nicht geöffnet werden, da dem Div-Element ein schließender Tag fehlt
Zuerst dachte ich, es läge an der Geschwindigkeit ...
Lösen Sie das Problem der Kombination von AND und OR in MySQL
Wie unten dargestellt: Wählen Sie Produktname, Pr...
Lösung zum Verbergen der Versionsnummer und der Webserverinformationen von Nginx
Nginx kann nicht nur Versionsinformationen verber...