vue中的event bus非父子组件通信解析


Posted in Javascript onOctober 27, 2017

有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的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中的event bus非父子组件通信解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
javascript 数组排序函数
Aug 20 Javascript
js post方式传递提交的实现代码
May 31 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 #Javascript
webpack配置之后端渲染详解
Oct 26 #Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 #Javascript
node文字生成图片的示例代码
Oct 26 #Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 #Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 #Javascript
You might like
转PHP手册及PHP编程标准
2006/12/17 PHP
第四章 php数学运算
2011/12/30 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python测试线程应用程序过程解析
2019/12/31 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
python中K-means算法基础知识点
2021/01/25 Python
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
中学教师暑期培训方案
2014/08/27 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
工作收入住址证明
2014/10/28 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
四年级语文教学反思
2016/03/03 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang