Vue实现组件间通信的七种方式

Vue.js 提供了多种组件间通信的方式，以下是其中的七种主要方式：

1. Props / $emit

这是 Vue 组件间通信的基础方式。父组件通过 props 向下传递数据给子组件，子组件通过 $emit 触发事件向父组件发送消息。

<!-- 父组件 -->  
<template>  
  <child-component :prop="data" @event="handleEvent"></child-component>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      data: 'Hello from parent'  
    };  
  },  
  methods: {  
    handleEvent(payload) {  
      console.log('Received from child:', payload);  
    }  
  }  
};  
</script>

<!-- 子组件 -->  
<template>  
  <button @click="notifyParent">Click me</button>  
</template>  
  
<script>  
export default {  
  props: {  
    prop: {  
      type: String,  
      required: true  
    }  
  },  
  methods: {  
    notifyParent() {  
      this.$emit('event', 'Hello from child');  
    }  
  }  
};  
</script>

2. Vuex

Vuex 是 Vue.js 的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
3. EventBus

EventBus 是一个简单的 Vue 实例，用于组件间的非父子通信。通过 $on 监听事件，$emit 触发事件。

// 创建事件中心  
const EventBus = new Vue();  
  
// 触发事件  
EventBus.$emit('event-name', { /* payload */ });  
  
// 监听事件  
EventBus.$on('event-name', (payload) => {  
  console.log(payload);  
});

4. provide / inject

provide 和 inject 主要在开发高阶插件/组件库时使用。无论组件层次结构有多深，只要调用了 provide 和 inject，那么就可以在这个组件及其子孙组件之间形成一个注入链。
5. attrs和listeners

$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高阶组件的时候非常有用。

$listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建高阶组件的时候非常有用。
6. slot-scope

通过作用域插槽 (scoped slots)，父组件可以访问子组件的数据。这在创建可复用的组件时非常有用，比如列表渲染组件。
7. ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

需要注意的是，虽然 ref 和 $refs 可以用来访问组件实例或 DOM 元素，但通常不建议过度使用它们来通信，因为这会使组件间的耦合度增加，不利于组件的复用和测试。尽量使用 props 和 events 进行父子组件间的通信，使用 Vuex 进行跨组件通信。对于需要访问子组件实例或 DOM 元素的情况，才考虑使用 ref 和 $refs。