Question

我已经设置了复制存储库：

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。我认为第二个广告位与第一个广告位具有相同的评论属性。我希望嵌套注释并只定义一次内部内容。

这可能吗？

Answer 1

不要通过插槽将注释再次显示给父组件，只需在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>

LIVE DEMO

在实时演示中，我尝试模拟stackoverflow注释样式。

Answer 2

存储库已更新

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>

Vue中是否可能有重复出现的广告位？

2 个答案: