Vue组件通讯方式

• props和$emit 父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的

• $parent，$children获取当前组件的父组件和当前组件的子组件

• $attrs和$listeners A-> B->c。 Vue2.4开始提供了$attres和$listeners来解决这个问题

• 父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量

• $refs获取组件实例

• eventBus 兄弟组件传递数据

  其中eventBus还是使用$emit和$on进行传递和接收数据

创建event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想=通知 B页面。

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

接收事件

<!-- IncrementCount.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};
</script>

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))

// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。

如果想移除事件的监听，可以像下面这样操作：

import { 
  eventBus 
} from './event-bus.js'
EventBus.$off('aMsg', {})

• vuex状态管理