vue $emit不起用 ，父组件监听不到？？

<template>
    <div class="flex flex-wrap w-100  bg-white " >
        <div v-for="(item,index) in list" :key="index"	class="p-1"	>
            <span @click="checkChildren(item)" class="iconfont">
                {{item.menuName}}{{item.children.length > 0 ? '&#xe7a8;' : ''}}
            </span>
            <template v-if="item.children.length && haveChildren">
                <list :list="item.children"></list>
            </template>
        </div>
    </div>
</template>
<script>
export default {
  name: "List",
  props: {
    list: Array
  },
  data(){
      return {
          haveChildren:false
      }
  },
  methods:{
      checkChildren(item){
          if(this.haveChildren){
              return this.haveChildren = false;
          }
          if(item.children.length){
              this.haveChildren = true;
          }else{
              this.$emit('click',item)
          }
          
      }
  }
};
</script>

原因：这是递归组件，然后又套了一层父组件，所以父组件就监听不到了；换成provide / inject 就可以了