子组件使用emit发送事件，父组件监听不到

在写组件的时候，我们经常需要父子组件之间通信，最常用的就是使用on监听事件，但是有时候，由于时机或者其他等原因，父组件根本就监听不到事件，这很大可能就是时机或者是你的this不对。下面我举个简单的例子。

子组件：

child.vue
<template>
   <button @click="sendMessage">发送</button>
</template>

method:{
 sendMessage(){
       this.$emit('handleMessage',{name:'张三'})
 },
}

父组件

<template>
  <child></child>
</template>
created(){
   this.$on('handleMessage',(data)=>{
        console.log(data)
   })
}

点击发送按钮，发现父组件监听不到事件，解决方案，发送事件的对象不对
修正子组件：

child.vue
<template>
   <button @click="sendMessage">发送</button>
</template>

method:{
dispatch(componentName, eventName, params) {
        let parent = this.$parent || this.$root;
        let name = parent.$options.componentName;

        while (parent && (!name || name !== componentName)) {
          parent = parent.$parent;

          if (parent) {
            name = parent.$options.componentName;
          }
        }
        if (parent) {
          parent.$emit.apply(parent, [eventName].concat(params));
        }
 },
 sendMessage(){
      this.dispatch('fatherComponent','handleMessage',{name:'张三'})
 },
}

修正父组件

<template>
  <child></child>
</template>
componentName:'fatherComponent',
created(){
   this.$on('handleMessage',(data)=>{
        console.log(data)
   })
}

这样就轻松监听到子组件发送过来的信息啦！解决的关键方法dispatch，得益于elementui