欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2020-10-07 14:25:54|栏目:vue|点击:

本文为大家分享了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怎么玩

上一篇:详解Vue+elementUI build打包部署后字体图标丢失问题

栏    目:vue

下一篇:Vue配合iView实现省市二级联动的示例代码

本文标题:vuejs事件中心管理组件间的通信详解

本文地址:http://www.codeinn.net/misctech/7894.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有