Vue 组件通信的几种方式

Prop 和 事件回调

父组件通过 prop 向子组件传递数据

1
<post title="hello"></post>

子组件通过自定义事件向父组件传递数据

1
2
3
4
5
6
<!-- 子组件触发 -->
<button v-on:click="$emit('hello')">
Click me to be welcomed
</button>
<!-- 父组件监听 -->
<example v-on:hello="world"></example>

Vuex

复杂项目可以使用 Vuex 进行状态管理,配合 vue-devtools 能够更好的追踪状态。

单独的事件管理中心 EventBus

单独使用一个 Vue 实例来管理事件 文档的例子,但是在复杂的场景下,事件的触发和监听可能散落在各个地方,不利于维护,更推荐使用 Vuex

依赖注入 provideinject

类似 React 里面的 context,相当于大范围有效的 prop。文档的例子 ,在项目中使用不多。

访问组件实例

$root 属性用来从一个子组件访问根组件的实例,$parent 属性访问父组件的实例。不利于组件解耦,不推荐使用。

总结

方案 适用场景 是否推荐使用
Prop 父子组件 推荐
Vuex 单元格 推荐
EventBus 任意组件之间 复杂项目不推荐
依赖注入 子孙组件之间 复杂项目不推荐
如果对您有帮助,可以赞助一杯可乐