【www.bbyears.com--组件控件开发】

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线：

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

在更多复杂的情况下，你应该考虑使用专门的 状态管理模式.就是用到了vuex

eventBus是作为兄弟关系的组件之间的通讯中介。

代码示例：

<script src="http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script>



todo app



<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:`add`,
data(){
return{
newtodo:""
}
},
methods:{
add:function(){
eventHub.$emit("add", this.newtodo)
this.newtodo = ""
}
}
}
var todoList = {
template:`
{{item}} \
     X \
     `,
     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>

效果图如下：

本文来源：http://www.bbyears.com/asp/140351.html