vuejs组件交互 - 02 - 事件中心管理组件间的通信

时间：2022-10-21 16:07:02

事件中心

这个可以是一个空的全局的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怎么玩

相关文章