Vue 组件通信的几种方式

Prop 和 事件回调

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

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

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

<!-- 子组件触发 -->
<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。

依赖注入 provide 和 inject

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

访问组件实例

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

总结