前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue使用组件递归实现评论盖楼功能笔记

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

原创
作者头像
帅的一麻皮
修改2020-09-03 10:02:17
2.1K0
修改2020-09-03 10:02:17
举报
文章被收录于专栏:前端与Java学习前端与Java学习

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

步骤:

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

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

如图:

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

就有了下图效果

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

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

代码语言:javascript
复制
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

差不多效果就完成了:

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.如何让一个组件自己显示自己?
  • 2.用组件递归实现评论盖楼的功能
    • 2.1-用vue脚手架搭建一个基本的结构
      • 2.2-在Home首页引入Comments组件,进行第一层评论数据渲染
        • 2.3-Comments组件获取评论数据进行渲染
          • 2.4-引入Floor递归渲染回复用户的楼层
            • 2.5-Floor组件接收Comments传递过来的数据,递归渲染
              • 2.6-楼层深度计算
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档