搜索

首页  >  问答  >  正文

javascript - 使用 event bus 怎样对实例属性操作?

使用了一个event bus进行兄弟组件进行通信,

这是其中一个组件:qdb_list

clickChange:function(obj){
      Bus.$emit('change',obj);
      this.$router.push({path:'/qdb_change'});
    }

触发click事件后会跳转到qdb_change组件

这是它的兄弟组件:qdb_change

import Bus from '../bus.js'
export default {
    name:'qdb_change',
    data:function(){
      return {
      newname:'',
      newstatus:'',
      newinstruction:'',
      text:'123456'
      }
    },
    created:function(){
      Bus.$on('change',obj=>{
      console.log(obj);
      this.newname=obj.qdb_name;   
      this.newstatus = obj.status;
      this.newinstruction = obj.instruction;
      });
    }
}

在这里对属性进行的赋值操作全部都无效,得到的依然是空白值,该怎样才能使其生效?

还有就是每次第一次点击qdb_list里面的跳转时,都不会有console.log(obj)出来,是不是$on并没有监听到事件?

但是第二次点击时它就会出现两个console.log(obj),是不是说Bus.$emit('change',obj)这个事件的触发次数会不断累积?

天蓬老师天蓬老师2793 天前623

全部回复(2)我来回复

  • 仅有的幸福

    仅有的幸福2017-05-19 10:30:29

    你这两个组件是不同的没有同时展示,也就是一个创建了,另一个就被销毁了,这种情况就不应该使用event bus,而应该使用vuex,实现组件的数据共享,qdb_list页面emit的时候,qdb_change页面还没创建created也没执行,怎么能监听到触发的emit,一般观察者模式是先on再emit

    回复
    0
  • PHPz

    PHPz2017-05-19 10:30:29

    这不是两个路由吗.怎么是兄弟组件

    回复
    0
  • 取消回复