Detailed explanation of event bus non-parent-child component communication in vue-JS Tutorial-php.cn

Detailed explanation of event bus non-parent-child component communication in vue

小云云

Release： 2018-01-02 10:16:06

Original

2452 people have browsed it

This article mainly introduces the communication analysis of event bus non-parent-child components in vue. The editor thinks it is quite good. Now I will share it with you and give it a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Sometimes components with non-parent-child relationships also need to communicate. In simple scenarios, use an empty Vue instance as the central event bus:

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

Copy after login

In more complex cases, you should consider using a dedicated state management pattern .Is using vuex

eventBus is used as a communication intermediary between components in a sibling relationship.

Code example:

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

Copy after login

The rendering is as follows:

Related recommendations:

How to solve the problem of eventbus being triggered multiple times in vue

Detailed explanation of the difference between this and event in JS

Guava eventbus example code detailed explanation

The above is the detailed content of Detailed explanation of event bus non-parent-child component communication in vue. For more information, please follow other related articles on the PHP Chinese website!