Vue树状评论

最新推荐文章于 2024-07-06 21:01:47 发布

皮蛋solo周（bug终结版）

最新推荐文章于 2024-07-06 21:01:47 发布

阅读量436

点赞数

分类专栏： Vue 文章标签： vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_46346899/article/details/129226955

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue.js应用中通过递归组件来构建树状评论的展示。每个评论可以有子评论，通过在子组件中递归调用来实现层级结构。示例代码展示了如何定义子组件以及如何在父组件中使用该子组件，同时提供了模拟的多级评论数据。

摘要由CSDN通过智能技术生成

在实际的开发过程中可能会遇到要展示树状评论的需求，这里我们需要运用到递归。

通过组件的递归来实现展示树状评论的效果

// 子组件
<template>
    <div>
        <div v-for="(item, index) in commentParams" :key="index">
            <div @click="commentID(item)">
                <span>{{ item.comment }}</span>
            </div>
            <input v-if="item.child" v-model="comment" />
            <button style="margin: 10px 0 10px 10px" @click="reply(item)">
                回复
            </button>
            <div>
                // 递归调用组件本身
                <Comment :commentParams="item.children"></Comment>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'comment',
        props: {
            commentParams: {
                type: Array,
                require: true,
            },
        },
        data() {
            return {
                isShow: null,
                comment: '',
            };
        },
        created() {},
        watch: {},
        methods: {},
    };
</script>

// 父组件
<template>
    <div class="about">
        <span>父组件</span>
        <input v-model="comment" />
        <button style="margin: 10px 0 10px 10px">第一级评论</button>
        <div style="margin-right: 10px; color: red">
            // 使用子组件
            <Comment :commentParams="treeData"></Comment>
        </div>
    </div>
</template>

<script>
    import Comment from '@/components/comment.vue';
    export default {
        components: { Comment, Nav },
        data() {
            return {
                comment: '',
                // 模拟树状评论集
                treeData: [
                    {
                        id: '0100',
                        comment: '第二级级评论',
                        children: [
                            {
                                id: '0110',
                                comment: '第二级回复',
                            },
                            {
                                id: '0120',
                                comment: '第二级回复',
                            },
                            {
                                id: '0130',
                                comment: '第二级回复',
                            },
                        ],
                    },
                    {
                        id: '0200',
                        comment: '第三级级评论',
                    },
                    {
                        id: '0300',
                        comment: '第四级级评论',
                    },
                    {
                        id: '0400',
                        comment: '第五级级评论',
                    },
                    {
                        id: '0500',
                        comment: '第六级评论',
                        children: [
                            {
                                id: '0510',
                                comment: '第六级回复',
                            },
                            {
                                id: '0520',
                                comment: '第六级回复',
                                children: [
                                    {
                                        id: '0521',
                                        comment: '第六级回复的回复',
                                    },
                                    {
                                        id: '0522',
                                        comment: '第六级回复的回复',
                                        children: [
                                            {
                                                id: '05221',
                                                comment:
                                                    '第六级回复的回复的回复',
                                                children: [
                                                    {
                                                        id: '052211',
                                                        comment:
                                                            '第六级回复的回复的回复的回复',
                                                    },
                                                    {
                                                        id: '052212',
                                                        comment:
                                                            '第六级回复的回复的回复的回复',
                                                    },
                                                ],
                                            },
                                            {
                                                id: '05222',
                                                comment:
                                                    '第六级回复的回复的回复',
                                            },
                                        ],
                                    },
                                ],
                            },
                        ],
                    },
                ],
            };
        },
        created() {},
        methods: {},
    };
</script>