Javascript Vue.js：通过“共享组件”；“移动”；不是复制它而是复制它？

我正在用Vue.js创建一个评论系统，它有很多评论（比如300+）

而且每个评论都有一个管理部分（下面标记为

组件

），当光标停留在评论上时，管理部分将出现

因此，如果有300条评论，admin section组件将被复制300次，即使在计算机上也不利于移动设备（因为组件太多了）

我想的是：是否可以通过在评论周围移动来共享相同的组件，这样就只有一个这样的管理部分

---

我不知道有什么技术可以让您将公共组件移动到页面中的任何位置。这通常是在jQuery世界中完成的，但它会导致非常混乱且难以调试的代码

正如@Nils在注释中提到的，您可以使用

v-if

，它不会在DOM中呈现浮动组件。因此，它不会增加页面的重量，您的页面会感觉很快（相对而言）

从技术上讲，这不会有任何区别，因为Vue.js可以轻松渲染1000行。参考：（点击彩色表格查看一些有趣的统计数据）

在下面的工作示例中，“Do something”按钮只有在您将光标放置在一个注释字段中后才会进入DOM。在此之前，它不会被渲染到DOM中

Vue.component（'comment-block'{
道具：[“评论”]，
模板：`
{{comment.author}}写道：
做点什么
`,
数据：函数（）{
返回{
显示选项：false
}
}
});
新Vue({
el:“#应用程序”，
数据：{
评论：[
{id:0，作者：'Bob'，消息：“这是我的评论#1”}，
{id:1，作者：'Frank'，留言：“评论#2”}，
{id:2，作者：'Joe'，留言：“在这一页（#3）中还有一条评论”}
]
}
});
正文{
利润率：20px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.评论{
填充物：5px；
}
.评论.作者{
显示：内联块；
宽度：120px；
文本对齐：右对齐；
}
.评论输入{
显示：内联块；
宽度：240px；
}
.评论.选项{
显示：内联块；
}

评论清单：

查看
v-if
指令（与
v-show
相反）。它通常会起作用。