原理：参考了Vue.js 1.x中的 broadcast的特性

适合开发层级不会很复杂的独立组件

缺点：依赖组件树的结构，比如需要知道A和B谁是父，谁是子，然后父中broadcast,子中dispatch。

先列一个简单的case，参考vue文档:
子组件

export default {
  methods: {
    handleEmitEvent () {
      this.$emit('test', 'Hello Vue.js');
    }
  }
}

父组件

<template>
  <child-component @test="handleEvent">
</template>
<script>
  export default {
    methods: {
      handleEvent (text) {
        console.log(text);  // Hello Vue.js
      }
    }
  }
</script>

子组件触发，父组件监听。
So, 既然是子组件自己触发的，那它自己也可以监听到，
即组件自己监听自己的emit。

<template>
  <div>
    <button @click="handleEmitEvent">触发自定义事件</button>
  </div>
</template>
<script>
  export default {
    methods: {
      handleEmitEvent () {
        this.$emit('test', 'Hello Vue.js')
      }
    },
    created () {
      this.$on('test', (text) => {
         console.log(text) // Hello Vue.js
      });
    }
  }
</script>

乍看多次一举， handleEmitEvent可以直接写逻辑，没必要emit,on

划重点

如果handleEmitEvent不是通过该组件自身调用的呢？

设想这样的场景，A是父组件，B是子组件，中间可能跨多级。
A向B通信：
A.vue

<template>
    <input @focus="handleFocus" />
</template>
<script>
  import Emitter from '../mixins/emitter.js'; // 先忽略混入的内容
  export default {
    name: 'componentA',
    mixins: [ Emitter ],
    methods: {
      handleFocus () {
        this.broadcast('componentB', 'sendMessage', '我被点了');
      }
    }
  }
</script>

B.vue

<script>
export default {
  name: 'componentB',
  created () {
    this.$on('sendMessage', this.showMessage)
  },
  methods: {
    showMessage (text) {
      console.log(text); // 我被点了
    }
  }
}
</script>

这里B监听的事件触发源是A组件中的input，具体调用emit sendMessage的地方其实还是在B组件中，不然B怎么会监听到呢？
其中究竟隐藏着怎样的秘密？
且听下回分解。
写的比较粗糙..
要去接人了。

Core Codes

to be continued...