zoukankan      html  css  js  c++  java
  • 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怎么玩

  • 相关阅读:
    k邻近
    C语言实现pwd—关于linux文件系统
    Linux多线程
    有关临时表
    毕设—线程池thread_pool(草)
    3-26
    3-25
    3-22
    关于中国神华
    3-20
  • 原文地址:https://www.cnblogs.com/wancy86/p/7323875.html
Copyright © 2011-2022 走看看