Comment les composants non parent-enfant du bus d'événements communiquent entre eux-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-16 14:25:22

original

1312 Les gens l'ont consulté

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) {
 // ...
})

Copier après la connexion

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>

Copier après la connexion

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!