本文共 824 字，大约阅读时间需要 2 分钟。

一,前言

上一篇介绍了组件通信的父子组件通信,在实际开发中组件通信的场景有很多根据组件关系可以分为父子组件通信,兄弟组件通信和跨级组件通信这一篇我们就介绍如何实现兄弟组件通信和跨级组件通信备注:暂时不介绍Vue1.0的通信方式

二,兄弟和跨级组件通信原理

先通过插图直观了解一下组件间的多种关系:

TODO 这里还需要一张图 暂时没找到

父子组件通信:

子组件使用$emit触发事件,父组件使用$on监听子组件的事件

非父子组件(兄弟和跨级组件通信如何实现通信):

Vue2.0较Vue1.0这部分有很大不同,Vue2.0推荐使用一个空的Vue实例充当一个"中介"转发事件,这个"中介"称为中央事件总线-bus组件间进行通信时,在bus中注册监听事件,用于接收数据,在组件中触发事件,用于发送数据这种方式非常的巧妙,可以实现任何组件间的通信,包括父子,兄弟,跨级组件通信并且这种方式可以兼容Vue1.0和2.0

三,通过Bus实现组件通信

使用中央事件总线方式实现组件通信:

   
        接收到的数据: {
   { message }}    
    
   

首先声明了一个空的Vue实例bus,充当中央事件总线组件(发送方)中的事件会通过bus.$emit向bus总线中的指定事件发送消息Vue(接收方)初始化时,向Bus总线注册对应事件的监听,触发Vue实例数据变化当组件(发送方)发送数据时,会通过bus总线触发一个事件.接收方响应这个事件,完成组件通信

四,结尾

通过bus总线的方式可以实现各种组件的通信,包括父子,兄弟,跨级组建通信声明的bus总线为一个空的Vue实例,当然也可以为它添加data,methods和computed等选项通过bus总线存储一些公用数据,在应用初始化时保存起来,使用时直接获取除了通过bus中央事件总线方式实现在组件间通信外,还可以使用父链和子组件索引来实现下一篇介绍父链和子组件索引实现组件通信