Vue递归组件之奇淫技巧

介绍

自己的内部实现又调用自己的组件

用途

用于多级菜单或者评论列表等多层级树形结构

案例

父组件

<template>
  <div class="index">
    <div v-for="item of list" :key="item.id">
      <ul v-if="!item.children">
        <li>{{ item.name }}1</li>
      </ul>
      <Recursion :info="item" :key="item.id" v-else />
    </div>
  </div>
</template>
<script>
import Recursion from "@/components/home/Recursion.vue";
export default {
  name: "MyHome",
  components: {
    Recursion,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: "1",
          children: [
            {
              id: 11,
              name: "11",
              children: [
                {
                  id: 111,
                  name: "111",
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

子组件

<template>
  <div class="container">
    <div>
      <div>{{info.name}}</div>
      <div v-for="item of info.children" :key="item.id">
        <ul v-if="!item.children">
          <li>{{item.name}}</li>
        </ul>
         <Recursion
          v-else
          :key="item.id"
          :info="item"
         >
         </Recursion>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Recursion",
  props: {
    info: Object,
  },
};
</script>