Vue之组件填坑

const UserProfile = {
        template: `
        <h1>UserProfile Component</h1>
        <p>test</p>
        `
    }

原本只有一行

<h1>UserProfile Component</h1>

添加多一行段落，渲染的时候报错了.

报错：

[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.

原因为：template模版组件中只能有 一个 根元素  ！！

 

解决方法： 只要用一组 div 标签 包裹起来就好了