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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 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实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
关于php中一些字符串总结
2016/05/05 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python实现双色球随机选号
2020/01/01 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
学生就业推荐信
2013/11/13 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
亚运会口号
2014/06/20 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
市场营销计划书范文
2015/01/16 职场文书
交通事故和解协议书
2015/01/27 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书