Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten des Ereignisbusses in Vue

Ausführliche Erläuterung der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten des Ereignisbusses in Vue

小云云Original: 2018-01-02 10:16:062434Durchsuche

Dieser Artikel stellt hauptsächlich die Kommunikationsanalyse von Event-Bus-Nicht-Eltern-Kind-Komponenten in Vue vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Manchmal müssen auch Komponenten kommunizieren, die keine Eltern-Kind-Beziehungen sind. Verwenden Sie in einfachen Szenarien eine leere Vue-Instanz als zentralen Ereignisbus:

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit(&#39;id-selected&#39;, 1)
// 在组件 B 创建的钩子中监听事件
bus.$on(&#39;id-selected&#39;, function (id) {
 // ...
})

In komplexeren Fällen sollten Sie die Verwendung eines dedizierten Statusverwaltungsmodus in Betracht ziehen

eventBus ist ein Kommunikationsvermittler zwischen Komponenten in einer Geschwisterbeziehung.

Codebeispiel:

<!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:[&#39;A&#39;,&#39;B&#39;,&#39;C&#39;]
}
},
created:function () {
this.$on(&#39;add&#39;, this.addTodo)
this.$on(&#39;delete&#39;, this.deleteTodo)
},
beforeDestroy:function () {
this.$off(&#39;add&#39;, this.addTodo)
this.$off(&#39;delete&#39;, 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:&#39;&#39;
}
},
methods:{
add:function(){
eventHub.$emit(&#39;add&#39;, this.newtodo)
this.newtodo = &#39;&#39;
}
}
}
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(&#39;delete&#39;,i)
     }
     }
}
var app= new Vue({
el:&#39;#todo-app&#39;,
components:{
newTodo:newTodo,
todoList:todoList
}
})
</script>
</body>
</html>

Das Rendering ist wie folgt:

Verwandte Empfehlungen:

So lösen Sie das Problem, dass Eventbus in Vue mehrmals ausgelöst wird

Ausführliche Erklärung von der Unterschied zwischen diesem und einem Ereignis in JS

Detaillierte Erklärung des Guava-Eventbus-Beispielcodes

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten des Ereignisbusses in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Methode zur Implementierung des JavaScript-Browser-Benutzeragenten-ErkennungsskriptsNächster Artikel：Methode zur Implementierung des JavaScript-Browser-Benutzeragenten-Erkennungsskripts

In Verbindung stehende Artikel

Mehr sehen