vue兄弟组件之间数据传递

兄弟组件之间的数据共享
在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。
EventBus 的使用步骤：
① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

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

② 在数据发送方，调用 bus.$emit(‘事件名称’, 要发送的数据) 方法触发自定义事件

<button @click="sendMsg">发送</button>
<script>
import bus from './eventBus.js'
export default {
    
    
  data(){
    
    
    return {
    
    
      msg:'23.18'
    }
  },
  methods:{
    
    
    sendMsg(){
    
    
      bus.$emit('share',this.msg);
    }
  }
}
</script>

③ 在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件

<p>{
    
    {
    
    msgFromLeft}}</p>
<script>
import bus from './eventBus.js'
export default {
    
    
  data(){
    
    
    return{
    
    
      msgFromLeft:''
    }
  },
  created(){
    
    
    bus.$on('share',(val)=>{
    
    
      this.msgFromLeft = val;
    })
  }
}
</script>