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

本文为大家分享了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.js每天必学之组件与组件间的通信
• vue之父子组件间通信实例讲解(props、$ref、$emit)
• vue2.0父子组件间通信的实现方法
• 详解Vue2中组件间通信的解决全方案
• Vue 父子组件、组件间通信
• vue组件间通信解析
• vue组件间通信子与父详解（二）
• vue综合组件间的通信详解
• Vue.js组件间通信方式总结【推荐】
• Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）