Maison > Article > interface Web > Comment les composants non parent-enfant du bus d'événements communiquent entre eux

Comment les composants non parent-enfant du bus d'événements communiquent entre eux

php中世界最好的语言original: 2018-04-16 14:25:221313parcourir

Cette fois, je vais vous montrer comment les composants non-parents et enfants du bus d'événement communiquent entre eux. Quelles sont les précautions pour que les composants non-parents et enfants du bus d'événement communiquent entre eux. un cas pratique, jetons un coup d'oeil.

Parfois, des composants qui ne sont pas des relations parent-enfant doivent également communiquer. Dans un scénario simple, utilisez une instance Vue vide comme bus central Event :

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

Dans les cas plus complexes, vous devriez envisager d'utiliser le mode de gestion dédié state. C'est le cas de vuex

. eventBus est un intermédiaire de communication entre des composants qui agissent comme des frères.

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:['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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment JS détecte les scripts dans le navigateur

La liaison d'une boîte contextuelle contextuelle ajoute un événement de données (Explication détaillée de pas)

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：Comment JS détecte-t-il les scripts dans le navigateurArticle suivant：Comment JS détecte-t-il les scripts dans le navigateur

Articles Liés

Voir plus