首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用 uniapp 写小程序,使用 vue 组件时遇到的一个小坑

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

作者头像
州的先生
发布2021-11-12 11:19:04
1.5K0
发布2021-11-12 11:19:04
举报
文章被收录于专栏:州的先生州的先生

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

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

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

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

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

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

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

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

本以为是个很简单的活:新建组件、自引用、父引用,一气呵成!

没成想,中途被噎着了。

组件内容如下所示:

<template>
  <view class="tree-menu" >
    <view v-for="doc in docs" :key="doc.id">
      <view v-if="doc.sub.length > 0">
        <view>{{doc.name}}</view>
        <toc-tree :docs="doc.sub"></toc-tree>
      </view>
      <view v-else>
        {{ doc.name }}
      </view>
    </view>
  </view>
</template>
<script>
  export default { 
    name: 'toc-tree',
    props: {
      docs:Array
    },
  }
</script>

父页面的调用如下所示:

<toc-tree :docs="project_toc"></toc-tree>

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

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

方法一,在组件中继续引入组件:

import TreeToc from "./TocTree.vue"

引入后对组件进行注册:

components:{      TreeToc    }

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

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

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

你有使用uniapp吗,遇到过什么坑吗?欢迎留言交流!

PS:我踩完坑之后,你就不用再踩了吧?

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-11-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 州的先生 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档