vue组件通信

vue组件通信

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。

针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent /$children、$attrs/$listeners和provide/inject

一、vue组件父子之间怎么通信？

1、父向子传递数据是通过 props，子向父是通过 events（$emit）；
2、通过父链 / 子链也可以通信（$parent / $children）；
3、ref 也可以访问组件实例；
4、provide / inject API；
5、$attrs/$listeners

二、兄弟组件之间怎么通信？有哪几种方式

1、Bus；
2、Vuex

三、跨级通信？

1、Bus；
2、Vuex；
3、provide / inject API
4、$attrs/$listeners

segmentfault.com/a/119000001…