记一次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  |              
我是todo-list组件
3 | | ^^^^^^^^^^^^^ 4 | | ^^^^^^^^^^^^ found in --->

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
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: `
              
我是todo-list组件
`
, 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>

你可能感兴趣的:(vue)