为什么vuejs里面定义的template模板里定义多个元素只显示第一个元素，解析还报错

今天练习到vuejs组件这一块，组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码。今天写了一段代码，开始显示的结果出现了错误，内容如下：

template: '<input v-model="todowork" type="text">\
      <button v-on:click="submit">提交</button>',

结果浏览器只显示了输入框，不显示后面定义的按钮，控制台还报错：
在这里插入图片描述
根据报错提示，知道template只能有一个根元素，于是就在最外层套了一层div就好了，

template: '<div>\
      <input v-model="todowork" type="text">\
      <button v-on:click="submit">提交</button>\
      </div>',

运行结果如下，控制台也不报错：

查到具体原因是因为：vue2.x版本删除了多个节点的模板，目前每个组件必须只有一个根元素，建议将模板中的所有内容包装在一个新元素内。官网解释如下图：

参考博客：https://blog.csdn.net/bluedandelion/article/details/80588107