vue递归组件实现多级列表

最新推荐文章于 2024-03-27 16:53:50 发布

转载最新推荐文章于 2024-03-27 16:53:50 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/fei-H/p/11359028.html

VUE.JS 专栏收录该内容

58 篇文章

订阅专栏

本文介绍了一种在前端开发中常见的递归组件实现方式，通过一个List组件的例子，展示了如何使用Vue.js来处理多层次嵌套的数据结构，使得组件能够自适应加载任意层级的数据。

递归组件：简单来说就是在组件中内使用组件本身。

首先我们先创建一个 List 的递归组件

<template>
    <div>
        <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="item-name">
                <span>{{item.name}}</span>
            </div>
            <div v-if="item.children" class="children-item">
                <list :list="item.children"></list>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "List",
  props: {
    list: Array
  }
};
</script>

上面的代码中我们使用了 List 组件本身，完成这些之后，我们在外部父级组件中使用 List 组件时，不管我们的数据有多少层嵌套关系，都可以完美的自适应加载，我们再也不用通过嵌套嵌套在嵌套了。

<template>
    <div class="list-detail">
      <list :list="list"></list>
    </div>
</template>
<script>
import List from "./components/List";
export default {
  name: "Parent",
  components: { List },
  data() {
    return {
      list: [{
          name: "经济",
          children: [{
              name: "如家",
              children: [{
                  name: "上江路-如家"
                },
                {
                  name: "望江路-如家"
                }]
            },{
              name: "7天",
              children: [{
                  name: "长江路-7天"
                },
                {
                  name: "望江路-7天"
                }]
            }]
        }]
    }
  }
}
</script>

最后我们来看看渲染后的结果