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 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
jquery json 实例代码
Dec 02 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
如何在vue中使用ts的示例代码
Feb 28 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
详细分析React 表单与事件
Jul 08 Javascript
Javascript实现打鼓效果
Jan 29 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
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
ucenter通信原理分析
2015/01/09 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
AngularJS的$location使用方法详解
2017/10/19 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
详细探究Python中的字典容器
2015/04/14 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python流程控制常用工具详解
2020/02/24 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
大二学习计划书范文
2014/04/27 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
城南旧事电影观后感
2015/06/16 职场文书
2015年国培研修感言
2015/08/01 职场文书
教师研修随笔感言
2015/11/18 职场文书