Vue全局事件总线踩坑

场景

在路由跳转中用全局事件总线进行组件间通信,遇到第一次发起的事件不能监听到的问题

原因：监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。要先监听自定义事件才能通过$emit触发。

解决方式

利用组件跳转的生命周期先后执行顺序,做到先监听,后触发，解决第一次不能有效监听到的问题

组件一生命周期函数
created() {
    console.log('created1')
},
beforeMount(){
    console.log('beforeMount1')
},
mounted() {
    console.log('mounted1')
    //this.getSummaryEnminList();
},
beforeUpdate(){
    console.log('beforeUpdate1')
},
updated(){
    console.log('updated1')
},
beforeDestroy() {
    console.log('beforeDestroy1')
    this.row.dataType = '1'
    this.$bus.$emit("showSituationDetail", Object.assign(this.row,this.dataForm));
},
destroyed(){
    console.log('destroyed1')
},

组件二生命周期函数
beforeCreate(){
    console.log('beforeCreate2')
},
beforeMount(){
    console.log('beforeMount2')
},
beforeUpdate(){
    console.log('beforeUpdate2')
},
updated(){
    console.log('updated2')
},
created() {
    console.log('create2')
    this.$bus.$on("showSituationDetail", (row) => {}
    );
},
mounted() {
    console.log('mounted2')
},
beforeDestroy() {
    console.log('beforeDestroy')
    this.$bus.$off("showSituationDetail");
},
destroyed(){
    console.log('destroyed2')
},
  
输出
beforeCreate1
created1
beforeMount1
mounted1
beforeUpdate1
updated1

beforeCreate2
create2
beforeMount2
beforeDestroy1
destroyed1
mounted2
beforeUpdate2
updated2