专栏首页前端与Java学习Vue使用组件递归实现评论盖楼功能笔记
原创

Vue使用组件递归实现评论盖楼功能笔记

1.如何让一个组件自己显示自己?

步骤:

  • 1.在组件内设定 name 属性
  • 2.使用这个 name 属性作为标签在组件自己的template里面渲染
  • 3.注意为了避免死循环,需要指定终止条件

下面是一个vue脚手架创建的示例

如图:

现在可以将这个组件引入到home中看看效果

就有了下图效果

2.用组件递归实现评论盖楼的功能

目标:将下面这段评论数据以楼层的形式渲染到页面

comments: [
        // parent 为回复的用户信息
        {
          content: "奥利给,兄弟萌",
          user: "王尼玛",
          // 第一层楼
          parent: {
            content: "蜜汁小汉堡,干了噢",
            user: "老八",
          },
        },
        {
          content: "一giao窝里giao giao",
          user: "小阿giao",
          //   第一层楼
          parent: {
            content: "你不去参加中国新说唱可惜了",
            user: "野马",
            //   第二层楼
            parent: {
              content: "画画的baby,画画的baby,奔驰的小野马和带刺的玫瑰",
              user: "老giao",
              //   第三层楼
              parent: {
                content: "去参加新说唱,有推荐学的歌没?",
                user: "药水",
              },
            },
          },
        },
        {
          content: "谁TM买小米儿!",
          user: "铁蛋",
        },
]

2.1-用vue脚手架搭建一个基本的结构

创建两个组件:

Comments:展示用户评论的组件

Floor:展示用户回复的用户评论(即我们需要递归的组件)

2.2-在Home首页引入Comments组件,进行第一层评论数据渲染

2.3-Comments组件获取评论数据进行渲染

假设comments为后台获取的评论数据

页面上就可以渲染出第一层的评论数据

2.4-引入Floor递归渲染回复用户的楼层

当评论数据中有parent的时候意味着有回复用户信息,因此需要引入Floor组件进行递归渲染这些数据,因为我们无法预知它一共有多少层

2.5-Floor组件接收Comments传递过来的数据,递归渲染

现在页面显示就是如下样式:

2.6-楼层深度计算

a.在Floor组件中定义一个calcuFloorDeep计算楼层深度的方法,计算楼层深度,该方法接受两个参数:

第一个参数:当前评论数据是否含有parent对象(即是否有回复用户,如果有就再次调用该方法)

第二个参数:接收当前楼层数

b.再定义一个计算属性,调用calcuFloorDeep方法,传入当前数据的parent与初始楼层1

差不多效果就完成了:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端day17-JS高级(原型对象)学习笔记

    帅的一麻皮
  • Git学习01-Learn Git Branching(在线学习工具)

    网址:https://learngitbranching.js.org/?locale=zh_CN

    帅的一麻皮
  • JAVA中的集合小结

    Collection是最基本的集合接口,声明了适用于JAVA(List和Set)集合的通用方法

    帅的一麻皮
  • Vue 2.X 文档阅读笔记二 (深入组件)

    官方推荐使用写法1来定义全局注册组件命名,以避免可能出现的与HTML元素相冲突的情况。

    前端_AWhile
  • Vue 2.X 文档阅读笔记二 (深入组件)

    官方推荐使用写法1来定义全局注册组件命名,以避免可能出现的与HTML元素相冲突的情况。

    前端_AWhile
  • 技术流|主流深度学习框架比较

    目前市面上主流深度学习框架近十余种,每种框架各具特色。如何选择合适的深度学习框架?本篇对主流深度学习框架进行综合比较,帮助大家理清思路。

    用户1386409
  • 直播预告|AI能否开启全球复苏?点击报名!

    目前,国内疫情逐渐稳定,但受国外疫情加速蔓延影响,世界经济形势面临更多不确定性,尤其传统产业遭受前所未有的冲击,新兴产业也在寻求新的出路,疫后经济亟待有效救治举...

    优图实验室
  • 《阿尔汉布拉宫的回忆》|AR进入韩剧?快看玄彬、朴信惠在“魔法”里谈恋爱!

    看多了韩剧、美剧……就容易陷入一定的套路。所以这次的《阿尔汉布拉宫的回忆》,大家有上当吗?

    VRPinea
  • 大会活动|2019WAIC腾讯论坛 - 科技之思,一场关于向善的思考和启示

    科技向善是在腾讯创始人之一张志东先生指导下,于2018年初由腾讯研究院发起的一个多方共建的研究、对话与行动平台,这一理念在2019年升级为腾讯公司新使命。

    优图实验室
  • 产品资讯|这次轮到鉴黄师失业了?腾讯推出智能鉴黄功能(多图,18岁以下禁入)

    继腾讯写稿机器人让记者失业(没有的事)事件后,这次腾讯又要让另一职业——网络鉴黄师失业了?

    优图实验室

扫码关注云+社区

领取腾讯云代金券