javascript - How to operate on instance properties using event bus?

Question

An event bus is used for communication between sibling components,

This is one of the components: qdb_list

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

After the click event is triggered, it will jump to the qdb_change component

This is its sibling component: 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;
      });
    }
}

All the assignment operations performed on the attributes here are invalid, and the result is still a blank value. How can I make it effective?

Also, every time you click the jump in qdb_list for the first time, console.log(obj) will not come out. Is it because $on did not monitor the event?

But when you click it for the second time, two console.log(obj) will appear. Does it mean that the number of triggers of the Bus.$emit('change',obj) event will continue to accumulate?

Answer 1

Your two components are different and are not displayed at the same time, that is, one is created and the other is destroyed. In this case, event bus should not be used, but vuex should be used to realize data sharing of components, qdb_list page emit At the time, the qdb_change page has not been created nor executed. How can we monitor the triggered emit? Generally, the observer mode is to turn on first and then emit

Answer 2

Aren’t these two routes? How come they are brother components