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

组件递归：

　　当组件要渲染的数据有children，并且children中的数据结构和当前数据结构一样，这种重复出现时，要渲染出来，可以用组件的name属性。

//子组件:注意，在子组件中的注册事件必须是和父元素的属性一致，即翠绿色的两个属性名必须一样，递归中子元素中@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:()=>[]
    }
  },

methods:{
    changeActive(target){
     this.$emit(target)




    },
   
  }
};
</script>




<style lang="less" scoped>
.right-list-container {
  .right-list-container {
    margin-left: 20px;
  }
}
.showName{
  display: inline-block;
  height: 30px;
   100%;
  line-height: 30px;
  font-size: 14px;
}
.active{
  color: red;
}
</style>>

}

//父组件
<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>

我疑惑的地方是，当点击了这个子组件，为什么不在该组件中立刻改变他的颜色，而是要去触发父组件的事件