我已经设置了复制存储库:
https://github.com/devidwong/recurring-slot
我仅使用Vue运行时,因此我无法在Vue.extend
上附加小提琴(需要模板编译器)
Vue 3是非常新的东西。我将其用于探索目的。我不知道这是否可以在Vue 2上使用,但我只是想知道该组件是否仍然可以工作:
comment.template.html:
<div class="comment">
<slot :currentComment="comment"></slot>
<Comment v-for="reply in comment.replies" :key="reply.id" :comment="reply">
<slot :currentComment="reply"></slot>
</Comment>
</div>
用法:
comments.template.html
<Comment v-for="comment in comments" :key="comment.id" :comment="comment">
<template #default="{ currentComment }">
<div>by {{ currentComment.author }}</div>
</template>
</Comment>
对于结构:
comments: [
{
id: 1,
author: 'Goodman',
replies: [
{
id: 11,
author: 'RepeatingMan',
replies: [
{
id: 111,
author: 'ExpectedMan',
replies: [
{
id: 1111,
author: 'MelodyOfFuture',
replies: []
}
]
}
]
}
]
}
]
我得到Repeatimg man
渲染了3次,而不是ExpectedMan
和MelodyOfFuture
。我认为第二个广告位与第一个广告位具有相同的评论属性。
我希望嵌套注释并只定义一次内部内容。
这可能吗?
答案 0 :(得分:2)
不要通过插槽将注释再次显示给父组件,只需在Comment
组件中打印作者姓名及其注释即可:
<div class="comment">
{{comment.author}}
<Comment v-for="reply in comment.replies" :key="reply.id" :comment="reply">
<slot :currentComment="reply"></slot>
</Comment>
</div>
父组件:
<Comment v-for="comment in comments" :key="comment.id" :comment="comment">
</Comment>
在实时演示中,我尝试模拟stackoverflow注释样式。
答案 1 :(得分:0)
存储库已更新
https://github.com/devidwong/recurring-slot
父母:
+------+---------+------------+------------+
| Id | Code | Items_id |Import_total|
+------+---------+------------+------------+
| 1 | 45612 | 1 | 2 |
| 2 | 45612 | 2 | 1 |
| 3 | 45612 | 4 | 1 |
| 4 | 45612 | 5 | 4 |
| 5 | 1234 | 2 | 1 |
+------+---------+------------+------------+
孩子:
<Comment
v-for="comment in comments"
:key="comment.id"
:comment="comment"
:detailsComponent="CommentDetails"
>
<template #default="{ currentComment }">
<CommentDetails
:currentComment="currentComment"
/>
</template>
</Comment>
详细信息:
<div class="comment">
<slot :currentComment="comment"></slot>
<Comment
v-for="reply in comment.replies"
:key="reply.id"
:comment="reply"
:detailsComponent="detailsComponent"
>
<template #default="{ currentComment }">
<component
:is="detailsComponent"
:currentComment="currentComment"
:detailsComponent="detailsComponent"
/>
</template>
</Comment>
</div>
不要忘记将CommentDetails(在父级中)声明为组件和数据输入:
<div>
by {{ currentComment.author }}
</div>