在父组件向子组件传递数据及子组件调动父组件自定义事件我们介绍了父子组件之间的传值方式。除了父子组件之间传值，我们还可能涉及非父子组件之间的传值。下面我们介绍两种非父子组件通信的方式。

一、EventBus 实现非父子组件通信

通过实例化一个Vue对象( 比如bus = new Vue() )作为母线，在组件中通过事件将参数传递出去( bus.$emit(event, [...args]) )，然后在其他组件中再通过bus( 这里按照刚前面实例化Vue对象后的叫法 )来监听此事件并接受参数( bus.$on(event, callback) )。

1.建立bus.js母线

import Vue from 'vue'
const bus = new Vue()
export default bus

2.建立根组件(root.vue)，引入两个同级的组件

<template>

  <div>
    <component-a></component-a>
    <component-b></component-b>
  </div>

</template>

<script>

import componentA from './componentA'
import componentB from './componentB'

export default {
  name: 'root',
  components: {componentB, componentA},
  data () {
    return {}
  }
}
</script>

<style>
</style>

3.建立组件A(componentA.vue)

<template>

  <el-form>
    <el-form-item label="A组件" label-width="80px">
      <el-input v-model="msg"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="emit">将数据传递到B组件</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
import bus from './bus'
export default {
  name: 'componentA',
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    emit: function () {
      bus.$emit('showMsg', this.msg)
    }
  }
}
</script>

<style>
</style>

4.建立组件B(componentB.vue)

<template>
  <el-form label-width="80px">
    <el-form-item label="B组件">
      <el-input v-model="receiveMsg"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import bus from './bus'
export default {
  name: 'componentB',
  data () {
    return {
      receiveMsg: ''
    }
  },
  created () {
    bus.$on('showMsg', value => {
      this.receiveMsg = value
    })
  }
}
</script>

<style>
</style>

二、$.root 实现非父子组件通信

1.建立根组件(root.vue)，引入两个同级的组件

<template>

  <div>
    <component-a></component-a>
    <component-b></component-b>
  </div>

</template>

<script>

import componentA from './componentA'
import componentB from './componentB'

export default {
  name: 'root',
  components: {componentB, componentA},
  data () {
    return {}
  }
}
</script>

<style>
</style>

2.建立组件A(componentA.vue)

<template>

  <el-form>
    <el-form-item label="A组件" label-width="80px">
      <el-input v-model="msg"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="emit">将数据传递到B组件</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
export default {
  name: 'componentA',
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    emit: function () {
      this.$root.$emit('showMsg', this.msg)
    }
  }
}
</script>

<style>
</style>

3.建立组件B(componentB.vue)

<template>
  <el-form label-width="80px">
    <el-form-item label="B组件">
      <el-input v-model="receiveMsg"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'componentB',
  data () {
    return {
      receiveMsg: ''
    }
  },
  created () {
    this.$root.$on('showMsg', value => {
      this.receiveMsg = value
    })
  }
}
</script>

<style>
</style>

这种方式，可以省略掉bus的定义，只需要把代码中的bus替换成this.$root即可