解决$emit第一次触发事件失效问题

原因如下：

当你点击触发$emit的语句时，如果$on所在页面或者组件还没创建或者挂载（即DOM没更新），那就会出现这个问题。

解决办法：

想办法将$on所在的页面或者组件先进行挂载，保证$emit触发时，$on所在页面或者组件挂载完毕。

例子如下：

//组件A
//当我在input框按下回车会执行此函数
methods:{ 
    Search(){
            this.$router.replace('/SearchInfo');    
            this.$bus.$emit('handledata',this.keywords);       
         }
},
    
//组件B
beforeMount(){
    this.$bus.$on('handledata',this.handleData);
},
//此时流程如下：我点击了input框的回车触发了Search函数，然后，应该触发组件B的handledata函数
//但是并没有执行，直到第二次回车才执行

作如下处理

methods：{
    Search(){
        this.$router.replace('/SearchInfo');
        this.$nextTick(function(){
            this.$bus.$emit('handledata',this.keywords);
        })
    }
}
//我加了nextTick后，B组件中的函数成功触发了

因为使用了nextTick，search中的$emit并没有立即执行，而此时我的B组件以及更新完了，此时$emit延迟执行，正好接收到了。

nextTick用法：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

参考 Vue.nextTick 的原理和用途 - 个人文章 - SegmentFault 思否