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

插槽使用報(bào)錯(cuò)。

google translation：
組件模板應(yīng)僅包含一個(gè)根元素。 如果要在多個(gè)元素上使用v-if，請(qǐng)改為使用v-else-if鏈接它們。

解決辦法：

普通的模板解決方法：

在模板最外面加一個(gè)div來包含模板（組件模板應(yīng)僅包含一個(gè)根元素）

帶插槽的模板解決方法：

加slot屬性和name屬性：（不加name會(huì)出現(xiàn)多次遍歷結(jié)果）

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>'});

初學(xué)Vue,感覺還是比較簡(jiǎn)單。

總結(jié)

以上是生活随笔為你收集整理的Vue在插槽slot时报错：Component template should contain exactly one root element. If you are using v-ifen的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。