vue每个组件必须只有一个根元素导致dom不必要的嵌套，如何避免呢？

Question

    <template>
        <div>  /** 这个div导致dom多嵌套了一层？！！我其实不是很需要这个div，xx */
            <article v-for="item for list" :key="item.id">
                {{item.desc}}
            </article>
        </div>    
    </template>
    

这个div导致dom多嵌套了一层？！！我其实不是很需要这个div, xx ,有没有解决办法呢？新手求教

Answer 1

你可以尽量用语义化的标签取代div这种标签，比如渲染正文可以用main，侧栏aside之类的或者section，另外如果要针对这个组件做整体样式控制，多一父级包裹其实方便样式管理。

Answer 2

如果是vue 1.0是允许template下直接到需要显示的元素，但是官方推荐在外面包一个父元素。

而到了vue2.0就是必须在外面包一个父元素了，不然会显示不出来的。

Answer 3

可以直接这样

<template>
    <article v-for="item for list" :key="item.id">
        {{item.desc}}
    </article> 
</template>

Answer 4

<template>

<article v-for="item for list" :key="item.id">
    {{item.desc}}
</article>

</template>

直接这样就好了

Answer 5

可以换个思路，重构一下组件避免出现一个组件里面是多个同级的其它组件这种情况。