vue学习笔记三：非父子组件通信

前言

在之前，我们学习了父子组件间的通信传值，接下来就看下非父子组件之间是怎样通信。

一、通过单独的事件中心管理组件间的通信

方式一：定义一个空的 Vue 实例作为事件总线

步骤一：定义一个空的 Vue 实例作为事件总线。

var eventHub = new Vue()

我们把这个空的 Vue 实例当作我们组件间通信的中转站，然后在组件中，使用 $emit, $on, $off 分别来分发、监听、取消监听事件，我们就在这些事件中来传递数据，进行组件间通信。

步骤二：定义监听事件

语法：

vm.$on( event, callback )
参数：
{string | Array<string>} event (数组只在 2.2.0+ 中支持)
{Function} callback
用法：
监听当前实例上的自定义事件。事件可以由`vm.$emit`触发。回调函数会接收所有传入事件触发函数的额外参数。

比如我们在user组件的created生命周期中监听stateChange事件，这样在user组件渲染完毕之后，就会时刻监听stateChange事件了。

components: {
    user: {
        template: "<h1>这是user组件</h1>",
        created() {
            // 步骤二
            eventHub.$on('stateChange', function (msg) {
                console.log("我是user组件，下面msg打印出来的是login组件的数据")
                console.log(msg)
            });
        },
    }
}

步骤三：定义触发事件

语法：

vm.$emit( eventName, […args] )
参数：
{string} eventName
[...args]
用法：
触发当前实例上的事件。附加参数都会传给监听器回调。

比如，我们在组件login中定义一个按钮，点击这个按钮会触发outLogin方法，而outLogin方法内部则会触发stateChange事件。

结合步骤一，代码如下：

<div id="app">
   <login></login>
    <