Vue2组件通信使用简单教程（速通版）

组件通信方式

Props

props可以实现子组件和父组件的双向通信，但使用起来较为繁琐。

父组件向子组件发消息

如直接在html添加参数，由子组件的Props直接接收。Props接收String，Number，Boolean，Array，Object，Date，Function，Symbol等数据类型。

      props:{
            "getSchoolName":{
                  Type:Function,
                  required:true,//必须存在
                  default:0    //默认值
                },
      }

这里直接到子组件里面，用开发工具可以看到

子组件向父组件传递数据

子组件像父组件传递信息，稍微麻烦一些。由父组件定义一个方法，通过props传递到子组件里面。

父组件定义方法

props传递到子组件里面

子组件定义接收

这里直接挂载执行

自定义事件ref通信

vue2的自定义事件之前有两种方式，一种是使用v-on/@绑定（已被移除），另外一个是使用ref的自定义事件实现。思路非常简单，

父组件

定义一个事件t2,绑定定义本地函数，通过子组件触发父组件执行

子组件

组件的自定义事件使用要经过绑定，才能使用，使用完毕需要经过解绑。

全局总线实现任意组件的通信

全局事件总线实现了任意组件间的通信，这个任意就很灵性，这意味着前两种并不能实现任意组件通信，而且相比之前的方法，简单了很多

把vue实例添加到全局总线监视

绑定事件

接收数据

消息订阅发布

发布订阅

接收消息