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

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

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

export default new Vue()

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

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

<template>
  <div>
    <h1>组件1</h1>
    <button @click="passMsg">传递数据给兄弟节点</button>
  </div>
</template>
<script>
  import bus from '../utils/bus'
  export default {
    name: 'Child',
    methods: {
      passMsg () {
        bus.$emit('message', 'data from Child')
      }
    }
  }
</script>

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

<template>
  <div>
    <h1>组件2</h1>
    来自兄弟节点的数据：{{msg}}
  </div>
</template>
<script>
  import bus from '../utils/bus'
  export default {
    name: 'Child2',
    data () {
      return {
        msg: ''
      }
    },
    mounted () {
      bus.$on('message', (data) => {
        this.msg = data
      })
    }
  }
</script>

第四步：App.vue

<template>
  <div id="app">
    <h-child></h-child>
    <h-child2></h-child2>
  </div>
</template>
<script>
  // 引入子组件
  import HChild from './views/Child'
  import HChild2 from './views/Child2'

  export default {
    name: 'Parent',
    components: {
      HChild,
      HChild2
    }
  }
</script>

结果：

单击按钮