vue中的event bus非父子组件通信解析
有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线：
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})
在更多复杂的情况下，你应该考虑使用专门的 状态管理模式.就是用到了vuex
eventBus是作为兄弟关系的组件之间的通讯中介。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>eventBus</title>
<script src="http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script>
</head>
<body>
<div id="todo-app">
<h1>todo app</h1>
<new-todo></new-todo>
<todo-list></todo-list>
</div>
<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:`<div><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></div>`,
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>
效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Vue父子组件之间的通信实例详解，包括了Vue父子组件之间的通信实例详解的使用技巧和注意事项，需要的朋友参考一下 在vue组件通信中其中最常见通信方式就是父子组件之中的通信，而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用，遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小
-
本文向大家介绍vue2.0父子组件及非父子组件之间的通信方法，包括了vue2.0父子组件及非父子组件之间的通信方法的使用技巧和注意事项，需要的朋友参考一下 1.父组件传递数据给子组件 父组件数据如何传递给子组件呢？可以通过props属性来实现 父组件： 子组件通过props来接收数据: 方式1： 方式2 : 方式3： 这样呢，就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么，如果子组
-
本文向大家介绍Vue2.0学习之详解Vue 组件及父子组件通信，包括了Vue2.0学习之详解Vue 组件及父子组件通信的使用技巧和注意事项，需要的朋友参考一下 什么是组件？ vue中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘，键盘，鼠标），它就是一个具有独立逻辑或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。 页面就是由一个个类似这样的部分组成的，比如导航
-
本文向大家介绍vue子父组件通信的实现代码，包括了vue子父组件通信的实现代码的使用技巧和注意事项，需要的朋友参考一下 之前在用vue写子父组件通信的时候，老是遇到问题！！！ 子组件传值给父组件： 子组件：通过emit方法给父组件传值，这里的upparent是父组件要定义的方法 模板： 在data中定义：switchStatus = true; 方法： 父组件：模板：
-
本文向大家介绍vue项目中v-model父子组件通信的实现详解，包括了vue项目中v-model父子组件通信的实现详解的使用技巧和注意事项，需要的朋友参考一下 前言 我们在vue项目中，经常有这样的需求，父组件绑定v-model，子组件输入更改父组件v-model绑定的数值。很多朋友对这种操作不是很清楚，这需要对v-model有比较深入的了解，今天谈谈v-model。 vue的双向数据绑定 v-m
-
本文向大家介绍浅谈Vue父子组件和非父子组件传值问题，包括了浅谈Vue父子组件和非父子组件传值问题的使用技巧和注意事项，需要的朋友参考一下 本文介绍了浅谈Vue父子组件和非父子组件传值问题，分享给大家，具体如下： 1.如何创建组件 1.新建一个组件，如：在goods文件夹下新建goodsList.vue 2.在main.js中引入 import goodsList from 'goods/good