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 05 Javascript
javascript 写类方式之十
Jul 05 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
vue实现图片上传到后台
Jun 29 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 checkbox 取值详细说明
2010/08/19 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
制作特殊字的脚本
2006/06/26 Javascript
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
python单链表实现代码实例
2013/11/21 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
学习Python需要哪些工具
2020/09/04 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
自我鉴定怎么写
2013/12/05 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
优秀护士演讲稿
2014/04/30 职场文书
就业协议书样本
2014/08/20 职场文书
欠款证明
2015/06/24 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
PHP获取学生成绩的方法
2021/11/17 PHP
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
vue使用element-ui按需引入
2022/05/20 Vue.js