Vue 递归插件

 app.vue 递归List里面的label数据

1.传入list数据到插件

<!-- App.vue -->
<template>
  <div>
    <recursionVue :list="list"></recursionVue>
  </div>
</template>

<script>
import recursionVue from "./view/recursion.vue"
export default {
  components: {
    recursionVue,
  },
  data() {
    return {
      list: [
        {
          label: "一级",
          children: [
            {
              label: "二级1-1",
              children: [
                {
                  label: "三级1-1",
                },
              ],
            },
          ],
        },
      ],
    }
  },
}
</script>

<style></style>

recursionVue插件

2.判断list的每一项有没有children

有children调用插件（自己）

没有children退出循环

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      {{ item.label }}

      <!-- 检测item里面有没有children项 -->
      <div v-if="Object.keys(item).includes('children')">
        <!-- 如果有children项，继续调用recursionVue插件 -->
        <recursionVue :list="item.children"></recursionVue>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "recursionVue",
  props: ["list"],
}
</script>

<style></style>

递归，找到相同计算的共同点，作为传入的数据或判断。