vue 组件通信方式

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

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

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注入这些方法。

```js

<!-- 父组件 -->

<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