Vue实现递归组件的思路与示例代码

<template>
  <div>
    <!-- 递归组件 -->
    <Recursion :list="list" />  list为获取数据，传入子页面
  </div>
</template>

<script>
import Recursion from "./recursion.vue";

export default {
  name: "index-Recursion",
  components: {
    Recursion,
  },
};
</script>

<template>
  <div>
    <div class="item">
      <div>
          <ul>
            <li v-for="(l, id) of list" :key="id">
              {{ l.name }}
              <ul style="padding-left: 20px" v-if="l.chidren"> // 核心代码1
                <li>
                    <index-chird :list="l.chidren" /> // 核心代码2
                </li>
              </ul>
            </li>
          </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index-chird", // 自身组件
  props: {
    list: Array,
  },
  data() {
    return {
      list: [],
    };
  },

  watch: {
    list(newData) {
      this.list = newData;
    },
  },
  
};
</script>

<style  scoped>
.item {
  margin: 0 auto;
}
</style>

<template>
...
    <colorful-circle 
         v-if="count > 1" // 控制递归条件
         :count="count - 1" // 每向下一层，count减1
         @colorChange="handleColor" 
    ></colorful-circle>
...
</template>

<template>
...
    <colorful-circle 
         v-if="count > 1" 
         :count="count - 1"
         @colorChange="handleColor" // 监听子colorful-circle组件发出的事件
    ></colorful-circle>
...
</template>
 
<script>
name: 'colorful-circle',
...
methods: {
...
    handleColor(c) {
      this.color = Color(c).darkenByAmount( .05 ); // 在本层组件改变颜色
      setTimeout(() => {
        this.$emit('colorChange', this.color); // 把事件再冒泡到上一层组件
      },100)
    },
}
...
</script>