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

2019-11-19 15:51:23

字体：大中小

来源：转载

供稿：网友

本文为大家分享了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 打包后的文件部署到express服务器上的方法

下一篇：JS实现的加减乘除四则运算计算器示例