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=""; } },

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wydfxs.html