Vue非父子组件通信之$on与$emit事件总线方法

由于Vue是单向数据流，父子组件传递数据可通过props属性向下传递属性。如两个非父子组件想要传递一个数据就没法通过props来传递了。Vue官方有自己的Vuex做全局状态管理，这对于大型项目来说非常有用。通过共有数据放在store中，所有组件均可拿到共有数据，本节不做探讨。对于简单的兄弟组件间的数据传递，官方还提供了事件总线来传递数据。

// 定义一个bus文件

import Vue from 'vue';

export default new Vue();

通过定义bus文件暴露出一个空的Vue实例作为中央事件总线，在需要接收数据的组件中监听（$on），在传递数据的组件中触发事件（$emit）。具体方法见代码

数据发送方：

<template>
  <div style="margin-bottom: 20px">
    <p-button type="primary" @click="send">send msg to compB</p-button>
  </div>
</template>

<script>
/**
 *  发送数据方， 在此组件中触发需要发送数据的方法
 */

import button from '../../packages/Button.vue';
import Bus from './bus';

export default {
  name: 'comp-a',
  data() {
    return {
      msg: 'this is a msg from compA',
    }
  },
  components: {
    'p-button': button,
  },
  methods: {
    send() {
      Bus.$emit('sendMsg', this.msg)
    }
  }
}
</script>

数据接收方：

<template>
  <div>
    msg from: {{ msg }}
  </div>
</template>

<script>
/**
 * 数据接收方，在此组件中监听发送方的方法
 */

import Bus from './bus';
export default {
  name: 'comp-b',
  data() {
    return {
      msg: ''
    }
  },
  created() {
    Bus.$on('sendMsg', (msg) => this.msg = msg)
  }
}
</script>

最终效果：

当然还有更好的方法，欢迎评论赐教！