vue的10种组件间通信方式

序号	方式	使用场景	说明
1	props	父=>子 (属性传参)	接收数据: 子组件中 props 定义接收; 派发数据: 父组件中绑定数据进行派发
2	emit/emit/emit/on	子=>父 组件通信(事件传参)	接收数据: 父组件调用 $on/v-on ; 派发数据: 子组件调用 $emit()
3	event bus	兄弟 组件通信 跨层级组件通信	自定义观察者模式的Bus并挂载到根Vue; 接收数据: 对应组件调用 $on ; 派发数据: 对应组件调用 $emit()
4	$refs	父取子 组件通信	通过 refs获取子节点引用直接操作，在父组件中用this.refs获取子节点引用直接操作，在父组件中用this.refs获取子节点引用直接操作，在父组件中用this. refs.Hello.name
5	$root	兄弟 组件通信	接收数据: 对应组件调用根组件的 $on() 派发数据: 对应组件调用根组件的 $emit()
6	$parent	子取父	接收数据: 对应组件调用公共父组件的 $on() 派发数据: 对应组件调用公共父组件的 $emit() this.$parent.属性/data/method
7	$children	父子 组件通信	通过 $children 获取并 查找 指定子节点后直接操作
9	provide/inject	跨多层级 组件通信	接收数据: "孙"辈组件通过定义 inject 获取数据 派发数据: 父组件中通过定义 provide 设置数据
9	$attrs	父=>孙 (非属性特性传参)	场景1 父孙传参 接收数据: 孙辈组件中 props 定义接收 桥接数据: 子组件中通过 v-bind="$attrs" 展开 派发数据: 父组件中绑定数据进行派发 场景2 父子传参 接收数据: 子组件中 $attrs.xxx 获取数据 派发数据: 父组件中绑定数据进行派发
10	$listeners	孙=>父 (事件传参)	场景1 孙父传参 接收数据: 父组件调用 $on/v-on 桥接数据: 子组件中通过 v-bind="$listeners" 展开 派发数据: 子组件调用 $listeners.xxx() 场景2 子父传参 接收数据: 父组件调用 $on/v-on 派发数据: 子组件调用 $listeners.xxx()
11	slot-scope & v-slot	插槽