vue 递归组件

递归组件

递归组件就是在模板中引用自身的组件

我们有时希望在一个组件内部渲染该组件本身，例如渲染树形结构时，需要在树根渲染子树，而子树与树根的结构是一样的，因此存在递归

一个简单的递归组件的例子如Tree.vue：

Tree.vue

<template>
  <div>
    <ul>
      <li v-for="item in data" :key="item.name">
        {{item.name}}
        <tree :data="item.children"></tree>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Tree",
  props: {
    data: Array
  },
}
</script>

在App.vue中使用该递归组件

<template>
  <div id="app">
    <tree :data="data"></tree>
  </div>
</template>

<script>
import Tree from "./components/Tree.vue";

export default {
  name: "App",
  data() {
    return {
      data: [
        {
          name: "grandFather",
          children: [
            {
              name: "father",
              children: [
                {
                  name: "son",
                  children: [],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  components: {
    Tree,
  },
};
</script>

<style lang="less">
</style>

运行效果：