vue 事件总线 非父子组件之间的简单信息传递

如果两个组件不是父子关系，那么传递信息就不能通过props了。

此时可以使用vue的事件总线来传递信息。

1.创建非父子组件都能访问的事件总线（也就是空的vue实例）

        1.创建一个EventBus.js

        2.引入vue并且创建一个vue实例

import Vue from 'vue'

const Bus  =  new Vue()

        3.将Bus导出

export default Bus

2.在发送消息的组件中对事件总线发送事件

        1.先要将Bus导入该组件

import Bus from '../utils/EventBus'

        2.在methods中写入发送消息

 methods: {
    sendMsgFn() {
      Bus.$emit('sendMsg', '今天天气不错，适合旅游')
    },
  },

3.在接受消息的组件中对发送消息的事件进行监听并给出回调方法 

          1.先要将Bus导入该组件

import Bus from '../utils/EventBus'

        2.一般在页面刚创建完就立即监听事件，所以在生命周期钩子函数created（）中写入绑定。

 created() {
    Bus.$on('sendMsg', (msg) => {
      this.msg = msg
    })
  },

此时执行sendMsgFn()方法就可以成功传递消息了。

注意，消息发送是一对多的关系，可以有多个组件对事件进行监听。

该方法适用于比较简单的交互场景，复杂场景难以维护，建议使用vuex。

下面给出源码。

App.vue

<template>
  <div class="app">
    <BaseA></BaseA>
    <BaseB></BaseB>
    <BaseC></BaseC>
  </div>
</template>

<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue'
import BaseC from './components/BaseC.vue'
export default {
  components:{
    BaseA,
    BaseB,
    BaseC
  }
}
</script>

<style>

</style>

components

        BaseA.vue

<template>
  <div class="base-a">
    我是A组件（接受方）
    <p>{{msg}}</p>  
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  data() {
    return {
      msg: '',
    }
  },
  created() {
    Bus.$on('sendMsg', (msg) => {
      // console.log(msg)
      this.msg = msg
    })
  },
}
</script>

<style scoped>
.base-a {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

        BaseB.vue

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button @click="sendMsgFn">发送消息</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  methods: {
    sendMsgFn() {
      Bus.$emit('sendMsg', '今天天气不错，适合旅游')
    },
  },
}
</script>

<style scoped>
.base-b {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

        BaseC.vue

<template>
  <div class="base-c">
    我是C组件（接受方）
    <p>{{msg}}</p>  
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  data() {
    return {
      msg: '',
    }
  },
  created() {
    Bus.$on('sendMsg', (msg) => {
      // console.log(msg)
      this.msg = msg
    })
  },
}
</script>

<style scoped>
.base-c {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

utils

        EventBus.js

import Vue from 'vue'

const Bus  =  new Vue()

export default Bus

效果图：

        1.发送前

        2.发送后