vue—递归组件（vue组件name的作用之一）

最新推荐文章于 2024-01-11 21:52:17 发布

fuux

最新推荐文章于 2024-01-11 21:52:17 发布

阅读量1.7k

点赞数 4

分类专栏： vue 文章标签： vue js 组件 vue组件递归前端

本文链接：https://blog.csdn.net/qq_42586895/article/details/105493233

版权

本文介绍了在Vue中如何使用递归组件来渲染层级结构数据，如文件目录结构。通过递归组件，可以避免多层v-for嵌套，简化代码。文中详细解释了递归组件的工作原理，包括主组件如何调用子组件，以及子组件中如何通过name属性进行递归调用。同时强调，递归组件的name属性是必不可少的，用于自身调用。

摘要由CSDN通过智能技术生成

vue—递归组件（vue组件name的作用之一）

相信我们对递归不陌生，因为它是算法中很常见解决问题的思想。而在这里我先强调一点，递归最重要的是什么？终止条件，一个递归不能没有终止条件。

有时候我们在项目中，可能会遇一种需求，它要求我们把很深层嵌套的json数据渲染到页面中，比如文件目录结构。现在我们就把一个文件夹下的所有文件模拟渲染到页面中。
文件目录的树形结构：

为什么要使用递归？

可能有人会有疑惑，我们为什么要使用递归，使用多个v-for嵌套渲染数据不行吗？
首先我们要搞清楚这几点：

数据是灵活的，我们并不知道它嵌套有多少层
如果数据特别庞大，我们需要写多少代码呢？

所以，想要解决以上问题，在vue中使用递归组件无疑是一种很好的选择

vue递归组件

前边对需求分析了很多，那到底什么是递归组件，说白了我们可以把组件当作函数，在组件内部自己调用自己就行了。我们完全可以把它当成使用递归遍历树结构。

1. 首先我们先看一下我们的数据吧

files: {
   
        title: "我的文件",
        children: [{
   
            {
   
            title: "学习",
            children: [
            {
   
                title: "大学英语"
            },{
   
                title: "高等数学"
            },{
   
                title: "计算机",
                children: [{
   
                    title