我遇到了Vue的单根元素导致组件限制的问题 . 在下面的示例中，我尝试将一个组件插入到表和列表中，并根据所选的视图显示一个或另一个，但是我处理它的方式会破坏我的布局 .
父组件：
<ul v-show="view === 'thumb'>
<component v-for="stuff in array" :view="view"></component
</ul>
<table v-show="view === 'table'>
<component v-for="stuff in array" :view="view"></component>
</table>
子组件现在需要它的根元素为 EITHER <tr> 或 <li> ，以便不破坏布局，具体取决于 view . 这是问题所在：
1）Vue组件模板必须只有一个根元素 .
2） <template> ，在模板中被忽略而未渲染，不能用作根元素 .
3）子组件中有很多代码，无论选择哪种视图，大多数都是相同的逻辑，因此唯一真正的区别是布局 .
4） <ul> 可以替代 <div> ，但 <table> 必须留下来 .
我能想到的唯一解决方案是创建两个独立的组件，每个组件对应一个视图 . 为了尽可能保持KISS和DRY，创建一个处理逻辑的单独类，每个组件只是将所有内容委托给该类实例 .
也许在Vue中使用两个不同模板和单个逻辑部件的方法更简单？
Laravel在刀片中推送和堆叠以将HTML传播到父刀片 . 也许Vue中有类似的东西？
也许有人可以想到更好的解决方案？也许我固定在一个愚蠢的想法上，看不到一个简单的解决方法？