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
Ubuntu MySQL 5.6 Version entfernen/installieren/Kodierungskonfigurationsdatei konfigurieren
1. MySQL entfernen a. sudo apt-get autoremove --p...
So verstehen Sie den Unterschied zwischen ref toRef und toRefs in Vue3
Inhaltsverzeichnis 1. Grundlagen 1.Referenz 2. to...
Native JS-Implementierung der Lupenkomponente
In diesem Artikelbeispiel wird der spezifische Co...
Lösung für den Absturz der Grafikkarte auf Linux-Servern
Wenn die Auflösung der Anmeldeoberfläche besonder...
Mehrere magische Verwendungen des JS ES6 Spread-Operators
Inhaltsverzeichnis 1. Attribute hinzufügen 2. Meh...
Detaillierte Erläuterung der primitiven Werte und Referenzwerte in ECMAScript
Inhaltsverzeichnis Vorwort Was sind dynamische Ei...
Jmeter stellt eine Verbindung zum Datenbankprozessdiagramm her
1. Laden Sie den MySQL-JDBC-Treiber (mysql-connec...
Über gutes Design
<br />Auf zehntausend Personen, die die Frag...
Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position
Die Position-Eigenschaft Die Positionseigenschaft...
Erstellen eines statischen Jenkins Docker-Agentknotens
Ein statischer Knoten ist auf einer Maschine fixi...
Detaillierte Erklärung der Ursachen und Lösungen von Konflikten zwischen Filtern und festen
Problembeschreibung Wenn filter im body verwendet...
JavaScript implementiert Farberkennung beim Überfahren der Tabellenzeile mit der Maus
In diesem Artikel erfahren Sie, wie Sie mit JavaS...
Beispiel für die Verwendung von CASE WHEN beim Sortieren in MySQL
Vorwort In einem früheren Projekt wurde die Sorti...
MySql Installer 8.0.18 Visuelles Installationstutorial mit Bildern und Text
Inhaltsverzeichnis 1. MySQL 8.0.18 installieren 2...
Designideen für MySQL-Backup und -Wiederherstellung
Hintergrund Lassen Sie mich zunächst den Hintergr...