记一次vue插槽出现问题：vue模板只能有一个根对象

最近要做vue框架的前端需求，抱着“既然用这个语言了就把vue语法都过一遍”。今天做slot实例时浏览器报错，报错信息如下：

vue.js:634 [Vue warn]: Error compiling template:

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.

1  |  
2  |              <div>我是todo-list组件</div>
3  |              <slot></slot>
   |              ^^^^^^^^^^^^^
4  |              
   |  ^^^^^^^^^^^^

found in

---> <TodoList>
       <Root>

报错提示为：vue模板只能有一个根对象。然后我又看了toDoList组件template 内的html代码没有用一个div来或是别的标签来包裹全部的元素
报错前端代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <todo-list>
            <div>你好尼</div>
        </todo-list>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //vue组件
        Vue.component('todo-list',{
            props: {  
            },
            // template 的属性值，是多行的 dom ，需用` ` 反引号
            template: `
              <div>我是todo-list组件</div>
              <slot></slot>
            `,
            data:function(){//data是方法，因为vue组件被复用 
                return{
                }
            }
        })
        var vm= new Vue({
            el:"#app",
        })
    </script>
</body>
</html>

修改to-do-list 模板代码后，展示正常。

                <div>
                    <div>我是todo-list组件</div>
                    <slot></slot>
                </div>

来源：CSDN

作者：褚留欢

链接：https://blog.csdn.net/weixin_43064364/article/details/104532445

标签

vue

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!