Vue2.x组件间通信汇总表

---

分享一篇以前做Vue2.x开发时总结的组件通信汇总

一、组件间通信方式表

序号	方式	使用场景	演示代码	说明
1	props	父=>子(属性传参)	√	接收数据: 子组件中props定义接收;
派发数据: 父组件中绑定数据进行派发
2	emit/emit/emit/on	子=>父组件通信(事件传参)	√	接收数据: 父组件调用$on/v-on;
派发数据: 子组件调用$emit()
3	event bus	兄弟组件通信
跨层级组件通信	√	自定义观察者模式的Bus并挂载到根Vue;
接收数据: 对应组件调用$on;
派发数据: 对应组件调用$emit()
4	$refs	父子组件通信	√	通过$refs获取子节点引用直接操作
5	vuex	兄弟组件通信
跨层级组件通信	×	通过单独文章说明vuex的使用
6	$root	兄弟组件通信	√	接收数据: 对应组件调用根组件的$on()
派发数据: 对应组件调用根组件的$emit()
7	$parent	父子组件通信
兄弟组件通信	√	接收数据: 对应组件调用公共父组件的$on()
派发数据: 对应组件调用公共父组件的$emit()
8	$children	父子组件通信	√	通过$children获取并查找指定子节点后直接操作
9	provide/inject	跨多层级组件通信	√	接收数据: "孙"辈组件通过定义inject获取数据
派发数据: 父组件中通过定义provide设置数据<