相思资源网 Design By www.200059.com
本文为大家分享了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怎么玩
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无vuejs事件中心管理组件间的通信详解的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。