在递归组件的时候emit传值在递归的时候失效

在递归组件的时候emit传值在递归的时候失效了，比如下面代码中递归组件的时候没有添加v-on="$listeners"父页面中itemClick是不会触发,最简单的就是向下面代码一样在递归组件中监听当前事件

<template>
  <div class="menu-item">
    <template v-if="data.child && data.child.length == 0">
      <el-menu-item @click="onClick(data)" :key="data.id" :index="data.path">{{data.title}}</el-menu-item>
    </template>
    <el-submenu :key="data.id" :index="data.id" v-else>
      <template slot="title">
        <i :class="data.icon"></i>
        <span slot="title">&nbsp;&nbsp;{{data.title}}</span>
      </template>
      <template v-for="item in data.child">
        <template v-if="item.child && item.child.length == 0">
          <el-menu-item  @click="onClick(item)" :index="item.path">{{item.title}}</el-menu-item>
        </template>
        <template v-if="item.child && item.child.length > 0">
          <menuItem :data="item" v-on="$listeners" :key="item.id"/>
        </template>
      </template>
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'menuItem',
  components: {},
  data () {
    return {
      activeIndex: ''
    };
  },
  props: ['data'],
  methods: {
    onClick(data){
      this.$emit('itemClick',data)
    }
  }
};
</script>