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
Vue implementiert WebSocket-Kundendienst-Chatfunktion
In diesem Artikel wird hauptsächlich die Implemen...
Detaillierte Erläuterung der MERGE-Speicher-Engine von MySQL
Die MERGE-Speicher-Engine behandelt eine Gruppe v...
Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen
Plötzlich musste ich einen privaten Dienst für di...
Die perfekte Lösung für das AutoFill-Problem in Google Chrome
In Google Chrome werden Sie nach der erfolgreiche...
Implementierung des Vue 3.x-Projekts basierend auf Vite2.x
Erstellen eines Vue 3.x-Projekts npm init @vitejs...
So starten Sie ein JAR-Paket und führen es unter Linux im Hintergrund aus
Der Linux-Befehl zum Ausführen des JAR-Pakets lau...
Detaillierter Prozess der SpringBoot-Integration von Docker
Inhaltsverzeichnis 1. Demo-Projekt 1.1 Schnittste...
Implementierung eines laufenden Springboot-Projekts mit Docker
Einführung: Die Konfiguration von Docker, auf dem...
Lösen Sie das Problem, dass await in forEach nicht funktioniert
1. Einleitung Vor ein paar Tagen bin ich bei der ...
Die MySQL-ID beginnt von 1 zu steigen, um das Problem der diskontinuierlichen ID schnell zu lösen
Die MySQL-ID beginnt bei 1 und erhöht sich automa...
Mehrere Methoden zur Lösung des Problems des MySQL-Fuzzy-Abfrageindexfehlers
Wenn wir das Platzhalterzeichen „like %“ verwende...
Detaillierte Erläuterung der verschachtelten Tabelle im Vue-ElementUI-Formular und der Überprüfung jeder Zeile
Inhaltsverzeichnis Effektanzeige Code-Link Schlüs...
So ändern Sie den Hostnamen in Linux dauerhaft
Wenn Sie Ihren Hostnamen ändern möchten, können S...
Detaillierter Prozess der Integration von Docker mit der Idee, Springboot-Anwendungen schnell bereitzustellen
Inhaltsverzeichnis 1. Einleitung 2. Umgebung und ...
Einführung in das Methodenattribut des Formularformulars in HTML
1 Methode ist eine Eigenschaft, die angibt, wie Da...