我有允许 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 存储上的操作。
我的观点是，越简单越好，并且一级嵌套不需要递归。将自己置于未来开发人员的角度，使代码易于阅读和推理；当您几周没有查看代码库时，未来的开发人员甚至可能就是您。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
