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
Kopieren von Feldern zwischen verschiedenen Tabellen in MySQL
Manchmal müssen wir eine ganze Datenspalte aus ei...
vue.config.js Verpackungsoptimierungskonfiguration
Die Informationen auf Baidu sind so vielfältig, d...
So verwenden Sie den Skeleton-Bildschirm im Vue-Projekt
Heutzutage ist die Anwendungsentwicklung grundsät...
Fallstricke bei der Installation des komprimierten MySQL 8.0.18-Pakets und beim Zurücksetzen vergessener Passwörter
http://www.cppcns.com/shujuku/mysql/283231.html S...
Erfahren Sie, wie Sie die Selbstüberwachung von Apache SkyWalking schnell aktivieren
1. Aktivieren Sie Prometheus-Telemetriedaten Stan...
Lösung zur Verwendung von html2canvas zum Verarbeiten von Dom-Elementen mit Baidu-Map in Bilder
Problem 1: Baidu Map verwendet gekachelte Bilder ...
JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Einkaufswagens (ES6 objektorientiert)
In diesem Artikel wird der spezifische JavaScript...
MySQL SQL-Anweisung zum Suchen doppelter Daten basierend auf einem oder mehreren Feldern
SQL findet alle doppelten Datensätze in einer Tab...
14 Techniken für leistungsstarke Websites
Original : http://developer.yahoo.com/performance...
Ein Blick auf toolbasierte Websites: die Definition von toolbasierten Websites und eine typische Fallanalyse (Bilder und Text)
Wenn es um Tool-Websites geht, haben wir zunächst...
Beispiel für die Anzeige eines Standardbilds, wenn in HTML kein Bild vorhanden ist
Ein Bildlink <img src="" /> Ich m...
Die neueste Version der MySQL5.7.19-Dekomprimierungsversion Installationshandbuch
MySQL-Version: MySQL Community Edition (GPL) ----...
Detaillierte Erklärung der Stile in uni-app
Inhaltsverzeichnis Stile in uni-app Zusammenfasse...
Implementierungsbeispiel für die Docker-Bereitstellung von Front-End- und Back-End-Trennprojekten
Inhaltsverzeichnis 1. Umweltvorbereitung 2. Ausfü...
Zwei Implementierungen des Front-End-Routings von Vue-Router
Inhaltsverzeichnis Modusparameter HashHistorie Ha...