Web-Frontend
js-Tutorial
Wie Ereignisbus-Komponenten, die keine Eltern-Kind-Komponenten sind, miteinander kommunizieren
Wie Ereignisbus-Komponenten, die keine Eltern-Kind-Komponenten sind, miteinander kommunizieren
Dieses Mal zeige ich Ihnen, wie nicht-übergeordnete und untergeordnete Event-Bus-Komponenten miteinander kommunizieren ist ein praktischer Fall, werfen wir einen Blick darauf.
Manchmal müssen auch Komponenten kommunizieren, die keine Eltern-Kind-Beziehungen sind. Verwenden Sie in einem einfachen Szenario eine leere Vue-Instanz als zentralen Event In komplexeren Fällen sollten Sie die Verwendung des dediziertenvar bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})-Verwaltungsmodus in Betracht ziehen. Dies ist bei vuex der Fall EventBus ist ein Kommunikationsvermittler zwischen Komponenten, die als Brüder fungieren.
Codebeispiel:
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!<!DOCTYPE html>
<html>
<head>
<title>eventBus</title>
<script src="http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script>
</head>
<body>
<p id="todo-app">
<h1>todo app</h1>
<new-todo></new-todo>
<todo-list></todo-list>
</p>
<script>
var eventHub = new Vue( {
data(){
return{
todos:['A','B','C']
}
},
created:function () {
this.$on('add', this.addTodo)
this.$on('delete', this.deleteTodo)
},
beforeDestroy:function () {
this.$off('add', this.addTodo)
this.$off('delete', this.deleteTodo)
},
methods: {
addTodo: function (newTodo) {
this.todos.push(newTodo)
},
deleteTodo: function (i) {
this.todos.splice(i,1)
}
}
})
var newTodo = {
template:`<p><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></p>`,
data(){
return{
newtodo:''
}
},
methods:{
add:function(){
eventHub.$emit('add', this.newtodo)
this.newtodo = ''
}
}
}
var todoList = {
template:`<ul><li v-for="(index,item) in items">{{item}} \
<button @click="rm(index)">X</button></li> \
</ul>`,
data(){
return{
items:eventHub.todos
}
},
methods:{
rm:function(i){
eventHub.$emit('delete',i)
}
}
}
var app= new Vue({
el:'#todo-app',
components:{
newTodo:newTodo,
todoList:todoList
}
})
</script>
</body>
</html>Empfohlene Lektüre:
Wie JS Skripte im Browser erkenntPopup-Popup-Box-Bindung zum Hinzufügen von Datenereignissen ( Ausführliche Erklärung Anzahl der Schritte)Das obige ist der detaillierte Inhalt vonWie Ereignisbus-Komponenten, die keine Eltern-Kind-Komponenten sind, miteinander kommunizieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
Ereignisverarbeitungsbibliothek in PHP8.0: Ereignis
May 14, 2023 pm 05:40 PM
Ereignisverarbeitungsbibliothek in PHP8.0: Ereignis Mit der kontinuierlichen Entwicklung des Internets wird PHP als beliebte Back-End-Programmiersprache häufig bei der Entwicklung verschiedener Webanwendungen verwendet. In diesem Prozess ist der ereignisgesteuerte Mechanismus zu einem sehr wichtigen Teil geworden. Die Ereignisverarbeitungsbibliothek Event in PHP8.0 bietet uns eine effizientere und flexiblere Ereignisverarbeitungsmethode. Was ist Event-Handling? Event-Handling ist ein sehr wichtiges Konzept bei der Entwicklung von Webanwendungen. Ereignisse können jede Art von Benutzerzeile sein
Steam Summer Sale – Valve verspricht 95 % Rabatt auf AAA-Spiele und bestätigt Rabatte für die viralen Spiele Palworld und Content Warning
Jun 26, 2024 pm 03:40 PM
Beim Summer Sale von Steam gab es bereits einige der besten Spiele-Rabatte, und dieses Jahr scheint es für Valve ein weiteres Homerun-Angebot zu geben. Ein Trailer (siehe unten), der einige der im Steam Summer Sale reduzierten Spiele vorstellt, wurde gerade veröffentlicht
So verwenden Sie das Event-Ereignismodul von Pygame in Python
May 18, 2023 am 11:58 AM
Das Event-Modul von Pygame ist eines der wichtigen Module von Pygame. Es ist der Kern für die Erstellung des gesamten Spielprogramms, z. B. häufig verwendete Mausklicks, Tastaturtipps, Spielfensterbewegung, Fenstergrößenänderung, Auslösen bestimmter Plots und Beenden . Spiele usw., diese können als „Ereignisse“ angesehen werden. Der Ereignistyp Pygame definiert eine Struktur, die speziell zum Verarbeiten von Ereignissen verwendet wird, nämlich die Ereigniswarteschlange. Diese Struktur folgt dem Grundprinzip „Wer zuerst kommt, mahlt zuerst“. Über die Ereigniswarteschlange können wir Benutzervorgänge in einer geordneten Reihenfolge verarbeiten -nach-eins (Trigger-Ereignis). Die folgende Tabelle listet die häufig verwendeten Spielereignisse in Pygame auf: Name Beschreibung QUIT Der Benutzer drückt die Schaltfläche zum Schließen des Fensters ATIVEEVENTPy
Um welches Ereignis handelt es sich in JavaScript, wenn die Größe des Browserfensters geändert wird?
Sep 05, 2023 am 11:25 AM
Verwenden Sie die Ereignisse window.outerWidth und window.outerHeight, um die Fenstergröße in JavaScript abzurufen, wenn die Größe des Browsers geändert wird. Beispiel: Sie können versuchen, den folgenden Code auszuführen, um die Größe des Browserfensters mithilfe von Ereignissen zu überprüfen: <!DOCTYPEhtml><html>
Steam Summer Sale-Trailer kündigt 95 % Rabatt auf AAA-Spieleangebote an und bestätigt Preissenkungen für Palworld, Stellaris und Content Warning
Jun 26, 2024 am 06:30 AM
Beim Summer Sale von Steam gab es bereits einige der besten Spiele-Rabatte, und dieses Jahr scheint es für Valve ein weiteres Homerun-Angebot zu geben. Ein Trailer (siehe unten), der einige der im Steam Summer Sale reduzierten Spiele vorstellt, wurde gerade veröffentlicht
Evaluierung von Windows 10: Dr. Hans Perspektive
Jan 05, 2024 pm 12:11 PM
Win10 ist ein sehr einfach zu bedienendes System, aber manchmal treten Probleme mit dem System auf. Daher entscheiden sich viele Benutzer, die sich nicht mit Computern auskennen, für eine Neuinstallation des Systems, um das Problem vollständig zu lösen. Sie entscheiden sich normalerweise für Dr. Han Sie dachten: Wenn Sie wissen möchten, wie diese Software ist, schauen wir uns den Artikel an. Dr. Hans Antwort zu Win10: Das ist ein ziemlich gutes Win10-System. Mit dieser Software können Benutzer ohne Grundkenntnisse das System durch einfache Vorgänge und Prozesse neu installieren, ohne dass ein CD-ROM-Laufwerk oder ein USB-Flash-Laufwerk erforderlich ist. Die Software bietet außerdem zwei sehr wichtige Tools zur Neuinstallation des Systems: System-Backup-Spiegelsystem und Wiederherstellungs-Spiegelsystem. Gleichzeitig verfügt die Software über viele weitere Funktionen, z. B. die Neuinstallation des Systems mit einem Klick, die Neuinstallation von USB-Festplatten usw.
Tesla verschickt Robotaxi-Einladungen für die Demoveranstaltung zum autonomen Fahren am 10. Oktober in LA
Sep 27, 2024 am 06:20 AM
Ursprünglich wurde erwartet, dass Tesla sein zuvor durchgesickertes Robotaxi bereits im August dieses Jahres enthüllen würde, doch CEO Elon Musk verschob die Veranstaltung unter Berufung auf ästhetische Änderungen an der Vorderseite des Robotaxi und den zusätzlichen Zeitaufwand für einige Last-Minute-Vorgänge
Tesla Robotaxi gibt bekannt, dass es am 10. Oktober starten wird, während die Einladungen an ausgewählte Aktionäre verschickt werden
Sep 26, 2024 pm 06:06 PM
Ursprünglich wurde erwartet, dass Tesla sein zuvor durchgesickertes Robotaxi bereits im August dieses Jahres enthüllen würde, doch CEO Elon Musk verschob die Veranstaltung unter Berufung auf ästhetische Änderungen an der Vorderseite des Robotaxi und den zusätzlichen Zeitaufwand für einige Last-Minute-Vorgänge
