事件和自引用组件 vue.js

我有允许 1 级线程的评论系统。意味着第一级评论看起来像 { ...内容， 线： [] } 其中线程可能有更多评论。我认为这对于自引用组件和带有插槽的列表很有用。 但过了一会儿我不知道如何连接这个东西。

SingleComment 组件如下

<template>
...  *content*

<b-button
    v-if="isCommentDeletable"
    @click="handleDelete"
</b-button>

<div v-for="item in item.thread" :key="item._id">
    <SingleComment class="ml-3"
        :item="item"
    />
</div>
</template>
...

    methods: {
        handleDelete () {
            this.$emit('remove')
        },
    }
... 
    components: {
        'NewComment': NewComment, 'SingleComment': this
    },
    name: 'SingleComment'
}
</script>

列表组件经典列表接收项目数组作为 prop，由下式给出

<div v-for="item in items" ...
    <slot
        name="listitem"
        :item="item"
    />
</div>

这是我想将这两个组件与模式一起使用的父级 家长

<AppModal

>
...
<List
    class="my-1"
    :items="comments.docs"
>

    <template v-slot:listitem="{ item }">
        <SingleComment
            :item="item"
            :remove="removeItem"
            @remove="removeItem"
        />
    </template>
</List>

我想将这个东西连接到 Parent 中，这样我就可以对整个列表使用单一模式。 我是否可以将事情与事件联系起来？或者？欢迎任何形式的帮助。我被困住了。我可以进行一些修改，但我真的不知道如何处理这个自引用组件。

如果只有一层嵌套，您可以简单地将组件本身作为插槽传递，如下所示：

<Comment v-for="comment in comments" :key="comment.id" v-bind="comment">
  <Comment v-for="thread in comment.thread" :key="thread.id" v-bind="thread" />
</Comment>

然后你只需要担心将 props 传递到更深一层，就好像你只有一个评论列表一样。我在 CodeSandbox 上创建了一个示例：https://codesandbox.io/embed/vue-template-mq24e.

如果你想使用递归方法，你只需要传递 props 和 events 即可；没有什么神奇的解决方案可以解决这个问题。更新 CodeSandbox 示例：https://codesandbox.io/embed/vue-template-doy66.

您可以避免显式传递removeitem事件侦听器关闭removeitem映射到组件的 Vuex 存储上的操作。

我的观点是，越简单越好，并且一级嵌套不需要递归。将自己置于未来开发人员的角度，使代码易于阅读和推理；当您几周没有查看代码库时，未来的开发人员甚至可能就是您。