在vue使用过程中,经常会用到兄弟组件的传值,但有时会遇到获取不到数据的情况,

• 1,正确理解兄弟传值的概念

  
  
  Vue兄弟传值
  
  

  如图所示,a传b或者b传a才是兄弟传值
  不同的page不能使用eventBus传值,可以使用用查询参数传值

A传B的步骤共3步,
1)新建一个eventBus.js内容为

import Vue from 'vue'
export default new Vue()

2)A组件引入eventBus.js,并使用emit发送要传递的数据

<script>
import eventBus from '你的地址/eventBus.js'
  export default{
  data(){
      return{
      data:'我是来自A组件的data'
    }
  }
  mounted(){
    this.$emit('transferData',this.data)
  }
}
</script>

3)B组件引入eventBus.js,并使用on来注册事件,并接受数据

<script>
import eventBus from '你的地址/eventBus.js'
  export default{
  data(){
      return{
      data:{}
    }
  }
  mounted(){
    this.$on('transferData',(val)=>{
      console.log(val)
      //我是来自A组件的data
    })
  }
}
</script>

• 2,vm.$emit和vm.$on的执行顺序
  使用vm.$on是打开相应的事件监听,只有打开监听后发送才能接收到传递过来的参数.
  所以要让vm.$on先于vm.$emit执行