vue递归组件实现评论回复结构
目录
1.递归函数
2.递归组件 - 评论
2.1 test.vue 创建数据架构
2.2创建mainComment.vue评论组件
2.3 在test.vue页面引入组件并进行遍历数据渲染
2.4 创建parent.vue组件，渲染第一层回复的父评论数据
2.5 递归开始：生成未知层数的评论，parent 组件内部递归
1.递归函数
递归函数：是指函数直接或间接调用函数本身，则称该函数为递归函数。
其中最经典的例子之一就是
斐波那契数列
function feibo(index) { if (index<=2) { return 1; } return feibo(index-1) + feibo(index-2);
}使用递归函数必须要符合两个条件：
1.在每一次调用自己时，必须是（在某种意义上）更接近我们期望它完成的任务的终点；
2.必须有一个终止处理或计算的出口。
使用建议：在使用递归时，要注意对递归函数的参数类型的检查，一定要保证有一个终止处理或计算的出口。否则很容易演变为死循环，从而造成内存溢出。
2.递归组件 - 评论
步骤
2.1 test.vue 创建数据架构
data() {return {commentList: [{content: "楼主说的有道理"},{content: "挽尊"},{content: "从前有座山"},{content: "+10086"},// 如果是回复别人, 就会把被回复的评论放在 parent 里面{content: "山上有座庙",parent: {content: "从前有座山"}},{content: "葬爱家族万岁"},{content: "庙里有个和尚在讲故事",parent: {content: "山上有座庙",parent: {content: "从前有座山"}}}]};}2.2创建mainComment.vue评论组件
{{commentData.content}}
2.3 在test.vue页面引入组件并进行遍历数据渲染
这样已经实现最新的第一层评论
2.4 创建parent.vue组件，渲染第一层回复的父评论数据
{{parentData.content}}
mainComment.vue主评论组件进行传递数据：
{{commentData.content}}
//如果当前一级评论里面有parent数据，就渲染parent结构，并把数据传递过去
这样已经实现回复的第二层评论：
2.5 递归开始：生成未知层数的评论，parent 组件内部递归
- 递归组件语法, 必须起一个 name 然后就能在自己的 template 当中调用自己
- 自己调用自己的数据传递模式是一样的 也是 props
- v-if="parentData.parent" 就是递归终止处理或计算的出口
{{parentData.content}}//组件自己调用自己，有parent就调用渲染并传递数据，没有就不渲染{{parentData.conent}}
递归评论已经实现：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！