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

最新推荐文章于 2024-08-14 17:35:09 发布

褚念荣

最新推荐文章于 2024-08-14 17:35:09 发布

阅读量754

点赞数

分类专栏： vue

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

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近要做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>

褚念荣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录