vue 组件通信方式

1. props/emit: 父子组件双向通信的主要方式，只能传递属性和方法，父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

小结: prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 props 只读，不可被修改，所有修改都会失效并警告。

2. v-slot 可以实现父子组件单向通信（父向子传值）

3. $children/$parent/$refs/$root 父组件通过 this.children 的方式获取组件列表，要注意得到$parent和$children的值不一样，$children的值是数组，而$parent是个对象。

4. attrs/listeners 能够实现跨级双向通信

5. provide/inject 父组件中通过 provide 来提供变量，子组件和子代组件通过 inject 拿到父组件定义的属性和方法，主要用于简单的数据通信的方式，如果数据是动态的，如果父组件的数据会被修改，不会触发子组件的渲染。

使用provide/inject：对于更深层次的组件通信，可以使用provide和inject。父组件通过provide提供方法，子组件通过inject注入这些方法。

<!-- 父组件 -->
<script>
export default {
  provide() {
    return {
      parentMethod: this.parentMethod
    };
  },
  methods: {
    parentMethod() {
      // 父组件的方法
    }
  }
};
</script>
<!-- 子组件 -->
<script>
export default {
  inject: ['parentMethod'],
  mounted() {
    this.parentMethod();
  }
};
</script>

6. Eventbus 可以实现全局通信，注册的时候如果使用的不谨慎会导致全局污染和内存泄漏，关闭页面或跳转的时候要及时注销以避免事件的反复注册，不推荐使用。

7. Vuex 可以实现全局通信，是 vue 项目全局状态管理的最佳实践。在项目比较庞大，想要集中式管理全局组件状态时，那么安装 Vuex 准没错。不是持久化数据，刷新页面后vue store 数据不存在。

总结

常见使用场景可以分为三类:

• 父子组件通信: props; $parent / $children; provide / inject ; ref ; $attrs / $listeners
• 兄弟组件通信: eventBus ; vuex
• 跨级通信: eventBus；Vuex；provide / inject 、$attrs / $listeners