步骤:
下面是一个vue脚手架创建的示例
如图:
现在可以将这个组件引入到home中看看效果
就有了下图效果
目标:将下面这段评论数据以楼层的形式渲染到页面
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: "铁蛋",
},
]
创建两个组件:
Comments:展示用户评论的组件
Floor:展示用户回复的用户评论(即我们需要递归的组件)
假设comments为后台获取的评论数据
页面上就可以渲染出第一层的评论数据
当评论数据中有parent的时候意味着有回复用户信息,因此需要引入Floor组件进行递归渲染这些数据,因为我们无法预知它一共有多少层
现在页面显示就是如下样式:
a.在Floor组件中定义一个calcuFloorDeep计算楼层深度的方法,计算楼层深度,该方法接受两个参数:
第一个参数:当前评论数据是否含有parent对象(即是否有回复用户,如果有就再次调用该方法)
第二个参数:接收当前楼层数
b.再定义一个计算属性,调用calcuFloorDeep方法,传入当前数据的parent与初始楼层1
差不多效果就完成了:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。