Component template should contain exactly one root element. If you are using v-if on multiple elemen

最新推荐文章于 2023-07-27 22:46:16 发布

叨唠

最新推荐文章于 2023-07-27 22:46:16 发布

阅读量4k

点赞数

分类专栏： Vue 文章标签： Vue Component template should cont

本文链接：https://blog.csdn.net/zyz00000000/article/details/83824385

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

报错：Component template should contain exactly one root element. If you are using v-if on multiple elemen

组件模板应该只包含一个根元素。如果在多个元素上使用v-if，那么使用v-else-if将它们链接起来

什么意思呢？看下面例子中错误的情况：

Vue.component('my-component',{
            props: ['title','content'],
            template: `           
                    <h3 class=".title">{{title}}</h3>
                    <div class=".content">{{content}}</div>                
            `,
        })

组件模板中有h3和div两个根元素，而Vue组件只允许用于一个根元素

修改一下，用一个div标签，将这他们包裹起来：

Vue.component('my-component',{
            props: ['title','content'],
            template: `
                <div>
                    <h3 class=".title">{{title}}</h3>
                    <div class=".content">{{content}}</div>
                </div>               
            `,
        })