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", {

        // 模板,插ul
        template: '<div><p><slot name="todo-p"></slot></p>' +
            '<ul>' +
            '<slot name="todo-li"></slot>' +
            '</ul></div>'
    });

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