无夜游魂

用 uniapp 写小程序，使用 vue 组件时遇到的一个小坑

2025-03-13 10:18:39

最近州的先生开始着手开发 MrDoc 配套的移动端应用，初步选择了 uniapp 作为开发框架。

uniapp 虽然被很多人吐槽，但是耐不住它出东西快，对于 MrDoc 这种一个人全干的项目来说，简直是神器。

上面说到 uniapp 被很多人吐槽，其中一部分的吐槽是说它性能不行；一部分吐槽是说其文档不全，比如其某个官方组件：

还有一部分，就是坑多。坑多的原因很多，比如各个平台的api差异，比如与原生VUE的兼容等等。

最近，州的先生就遇到了一个百思不得其解的坑。

MrDoc 的文集目录是需要无限层级的。就像下图这样：

在 Web 端，对于服务端的渲染，州的先生通过 Django 的模板进行模板递归；而对于前段的渲染，这直接通过 JavaScript 函数进行递归。

而在 uniapp 上，州的先生也考虑使用递归来完成小程序端的文集文档无限层级目录的渲染。

本以为是个很简单的活：新建组件、自引用、父引用，一气呵成！

没成想，中途被噎着了。

组件内容如下所示：

代码语言：javascript

代码运行次数：0

复制

Cloud Studio代码运行

父页面的调用如下所示：

代码语言：javascript

代码运行次数：0

复制

Cloud Studio代码运行

结果，除了第一级的数据能够渲染，其他层级的数据根本没用，经过测试发现，组件内的递归根本没起作用。

翻遍文档、一通搜索后发现，常规的 VUE 组件递归用法在 uniapp 中是不可行的。要想递归，有两种方法：

方法一，在组件中继续引入组件：

代码语言：javascript

代码运行次数：0

复制

Cloud Studio代码运行

import TreeToc from "./TocTree.vue"

引入后对组件进行注册：

代码语言：javascript

代码运行次数：0

复制

Cloud Studio代码运行

components:{      TreeToc    }

方法二，使用 uniapp 的 easycom 。根据 easycom 规范，将组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。如下所示：

这样，不用在页面引入和注册，就可以直接使用 VUE 组件了。

最终，顺利实现文集文档目录的无限层级渲染！

转：https://cloud.tencent.com/developer/article/1900358