Maison > Article > interface Web > Explication détaillée de la communication des composants non parent-enfant du bus d'événements dans vue

Explication détaillée de la communication des composants non parent-enfant du bus d'événements dans vue

小云云original: 2018-01-02 10:16:062416parcourir

Cet article présente principalement l'analyse de la communication des composants non parent-enfant du bus d'événements dans vue. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Parfois, des composants qui ne sont pas des relations parent-enfant doivent également communiquer. Dans des scénarios simples, utilisez une instance Vue vide comme bus d'événements central :

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

Dans les cas plus complexes, vous devriez envisager d'utiliser le mode de gestion d'état dédié. Il utilise vuex<.>

eventBus est un intermédiaire de communication entre composants dans une relation fraternelle.

Exemple de code :

<!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>

Le rendu est le suivant :

Recommandations associées :

Comment résoudre le problème du déclenchement multiple du bus d'événements dans Vue

Explication détaillée de la différence entre ceci et l'événement en JS

Explication détaillée du code d'exemple de bus d'événement Guava

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode d'implémentation du script de détection d'agent utilisateur du navigateur JavaScriptArticle suivant：Méthode d'implémentation du script de détection d'agent utilisateur du navigateur JavaScript

Articles Liés

Voir plus