组件递归 以及递归后的$emit失效问题

//子组件:注意，在子组件中的注册事件必须是和父元素的属性一致，即翠绿色的两个属性名必须一样，递归中子元素中@changeActive就是父元素穿过来的changeActive属性；
<template>
  <ul class="right-list-container">
    <li v-for="(item,index) in list" :key='item.name + index' @click='changeActive(item.name)'>
      {{item.name}}
      <rightList :list="item.children" @changeActive='changeActive' />//通过向子组件的list传值，实现递归
    </li>
  </ul>
</template>

<script>
export default {
  name:'rightList',

  props: {
    list:{
      type: Array,
      default:()=>[]
    }
  },

}

//父组件
<template>
  <div class="test-container">
    <rightList :list='list' @changeActive='changeActive(item)'/>
  </div>
</template>

<script>
import rightList from './index';
export default {
  data() {
    return {
      list: [
        {
          name: 'a',
          children: [
            {
              name: 'a-1',
            },
            {
              name: 'a-2',
            },
          ],
        },
        {
          name: 'b',
          children: [
            {
              name: 'b-1',
            },
            {
              name: 'b-2',
            },
          ],
        },
        {
          name: 'c',
        },
      ],
    };
  },
  methods:{
    changeActive(item){  
　　　　console.log(item)
　　}

  }

  components: {
    rightList,
  },
};
</script>