Vue在插槽slot时报错：Component template should contain exactly one root element. If you are using v-ifen

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead

插槽使用报错。

google translation：
组件模板应仅包含一个根元素。 如果要在多个元素上使用v-if，请改为使用v-else-if链接它们。

解决办法：

普通的模板解决方法：

在模板最外面加一个div来包含模板（组件模板应仅包含一个根元素）

带插槽的模板解决方法：

加slot属性和name属性：（不加name会出现多次遍历结果）

html:

<todo-slot><!-- v-on@==========v-bind:--><todo-p slot="todo-p" :tittle="tittle"></todo-p><todo-li slot="todo-li" v-for="item in items" :item="item"></todo-li></todo-slot>

template:

Vue.component("todo-slot", {// 模板,插ultemplate: '<div><p><slot name="todo-p"></slot></p>' +'<ul>' +'<slot name="todo-li"></slot>' +'</ul></div>'});

初学Vue,感觉还是比较简单。

总结

以上是生活随笔为你收集整理的Vue在插槽slot时报错：Component template should contain exactly one root element. If you are using v-ifen的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。