由于组件限制，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>
子组件现在需要其根元素为 E <tr>或<li>，以便不破坏布局，具体取决于view。问题出在这里：
1）Vue组件模板必须只有一个根元素。
2）<template>（在模板中被忽略且未呈现）不能用作根元素。
3）子组件中有很多代码，并且无论选择哪种视图，大多数情况下都是相同的逻辑，因此唯一的真正区别是布局。
4）<ul>可以代替<div>，但是<table>必须保留。
我能想到的唯一解决方案是创建两个单独的组件，每个视图一个。为了尽可能保持KISS和DRY，请创建一个单独的类来处理逻辑，并且每个组件都将所有内容委派给该类实例。
也许在Vue中有一种使用两个不同模板和一个逻辑部分的简便方法？
Laravel具有推入并堆叠在刀片中的功能，可将HTML传播到父刀片。也许Vue中有类似的东西？
也许有人能想到更好的解决方案？也许我固执于一个愚蠢的想法，看不到简单的解决方法？