vuejs事件中心管理组件间的通信详解


Posted in Javascript onAugust 09, 2017

本文为大家分享了vuejs事件中心管理组件间的通信,供大家参考,具体内容如下

事件中心

这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法。

import Vue from 'Vue'
window.eventHub = new Vue();

事件监听和注销监听

事件监听应在更组件的created钩子函数中进行,在组件销毁前应注销事件监听

//hook 
 created: function () {
 //listen event
 window.eventHub.$on('switchComments',this.switchComments);
 window.eventHub.$on('removeIssue',this.removeIssue);
 window.eventHub.$on('saveComment',this.saveComment);
 window.eventHub.$on('removeComment',this.removeComment);

 //get init data
 var that =this;
 axios.get('issue/index')
 .then(function (resp) {
  that.issue_list=resp.data;
 });
 },
 beforeDestroy: function () {
 window.eventHub.$off('switchComments');
 window.eventHub.$off('removeIssue');
 window.eventHub.$off('saveComment');
 window.eventHub.$off('removeComment');
 }

子组件的emit事件,注意这里用的window.$emit而不是this.emit

methods: {
 removeComment: function(index,cindex) {
  window.eventHub.$emit('removeComment', {index:index, cindex:cindex});
 },
 saveComment: function(index) {
  window.eventHub.$emit('saveComment', {index: index, comment: this.comment});
  this.comment="";
 }
 },

Note: 这其实还不是最理想的通信方式,下一篇我们看看vuex怎么玩

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

Javascript 相关文章推荐
JS 判断代码全收集
Apr 28 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 #Javascript
AngularJS ionic手势事件的使用总结
Aug 09 #Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 #Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 #Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 #Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 #Javascript
vuejs父子组件之间数据交互详解
Aug 09 #Javascript
You might like
php导出CSV抽象类实例
2014/09/24 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Numpy的简单用法小结
2019/08/28 Python
python实现126邮箱发送邮件
2020/05/20 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
python爬虫 requests-html的使用
2020/11/30 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
财务会计应届生求职信
2013/11/24 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
会计自荐信范文
2014/03/09 职场文书
活动总结书
2014/05/08 职场文书
环境整治工作方案
2014/05/18 职场文书
受资助学生感谢信
2015/01/21 职场文书
2015年教师国培感言
2015/08/01 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
python爬取豆瓣电影TOP250数据
2021/05/23 Python
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL