vue8种通信方式

参考：https://juejin.im/post/5d267dcdf265da1b957081a3#heading-1（写的很详细）
　　   https://blog.csdn.net/songxiugongwang/article/details/84001967

　　　《vue.js实战》

本人实际操作：

https://github.com/zhaozhenghao/vue.git

我这边笼统说一下

1.props/$emit 

概念：父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

2.$children/$parent

概念： 通过$parent和$children就可以访问组件的实例。

使用 this.$parent查找当前组件的父组件。
使用 this.$children查找当前组件的直接子组件，可以遍历全部子组件， 需要注意 $children 并不保证顺序，也不是响应式的。

3.provide/ inject

概念：provide/ inject 是vue2.2.0新增的api,简单来说就是父组件中通过provide来提供变量,然后再子组件中通过inject来注入变量。

4.ref/ refs

概念：ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据

5.eventBus

概念：eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。

6.Vuex

概念：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上。

7.localStorage / sessionStorage

8.attrs/$listeners

概念：是vue2.4.0引入的该方法，为了解决跨级的组件

• 使用props绑定来进行一级一级的信息传递,如果D组件中状态改变需要传递数据给A,使用事件系统一级级往上传递
• 使用eventBus,这种情况下还是比较适合使用,但是碰到多人合作开发时,代码维护性较低,可读性也低
• 使用Vuex来进行数据管理,但是如果仅仅是传递数据,而不做中间处理,使用Vuex处理感觉有点大材小用了.

 

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

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