Vue兄弟组件间传值 之 事件总线

第一步：在src/utils目录下创建文件bus.js

// 专门用来传递传递消息
import Vue from 'vue'

export default new Vue()

注：公共文件bus.js专门用来传递消息

第二步：数据发送方Child.vue

  
    组件1
    传递数据给兄弟节点
  


  import bus from '../utils/bus'
  export default {
    name: 'Child',
    methods: {
      passMsg () {
        bus.$emit('message', 'data from Child')
      }
    }
  }

第三步：数据接收方Child2.vue

  
    组件2
    来自兄弟节点的数据：{{msg}}
  


  import bus from '../utils/bus'
  export default {
    name: 'Child2',
    data () {
      return {
        msg: ''
      }
    },
    mounted () {
      bus.$on('message', (data) => {
        this.msg = data
      })
    }
  }

第四步：App.vue

  
    
    
  


  // 引入子组件
  import HChild from './views/Child'
  import HChild2 from './views/Child2'

  export default {
    name: 'Parent',
    components: {
      HChild,
      HChild2
    }
  }

结果： 单击按钮