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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
小程序实现长按保存图片的方法
Dec 31 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学习之字符串比较和查找
2011/04/17 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
python协程之动态添加任务的方法
2019/02/19 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python实现微信自动回复机器人功能
2019/07/11 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
职务聘任书范文
2014/03/29 职场文书
岗位工作说明书
2014/07/29 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技