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!