详解vue为什么要求组件模板只能有一个根元素
1、vue多表单不能写多个对象。ue表单组件是指传统的表单提交框用vue框架进行组装成一套公用的模板组件，一个组件只能有一个根标签，但是里面可以有多个template。
2、只有通过指定了唯一的 el 根元素，Vue 实例才能在内部通过 createElement 方法生成一个对应的虚拟 DOM 结构映射真实的 DOM 元素进行操作渲染成真正的 HTML。在基本的 HTML 结构中，顶级标签是 ，只能有一个这样的标签存在。
3、组件的模板只能有一个根元素。下面的情况是不允许的。
4、如果内容是一个组件，这个组件必须仅有一个根元素。 这一点在官方文档可以看到。
5、v-bind有一个对应的语法糖，也就是简写方式，在开发中，我们通常会使用语法糖的形式，因为更简洁。 注意：Vue2 template模板中只能有一个根元素，Vue3 template模板中允许有多个根元素。
使用vue如何制作Tab组件
1、import element-ui/lib/theme-chalk/index.css开始封装 iTable.vue 组件 (骨架)由于公司项目都是以 i 开头，所以，为了区分组件和页面，习惯于组件命名也以 i 开头。
2、打开一个vue文件，添加一个el-tabs组件，设置默认选中第一个tab。新加一个el-tab-pane标签，使用slot=label自定义内容为小图标+标题。
3、但是可以通过传入 function(你可以理解为一个钩子)，参与组件状态变更的行为。比如很好用的拖拽库，Vue.Draggable控制元素是否被拖动的行为。Vue.Draggable可以传入一个 move 方法，我们看一下它如何处理的。
4、最近vue不是特别火，自己想写一个vue 的底部菜单栏，然后试着开始写，起来还是听痛苦的，但是还是写出来，这个过程重查询了一些资料和看了一些视频。
如何用vue实现模态框组件
1、这里只介绍如何去开发一个模态框组件，有需要进行更多扩展的，可以根据自己的需求自行开发。
2、/template 模态框结构分为三部分，分别为头部、内部区域和操作区域，都提供了slot，可以根据需要定制。
3、conditional rendering，如果初始状态是 false，它什么都不会干。另外一个情况是，我们可能需要在一个嵌套了很多层的子组件里面触发 modal。这种情况下，你应该把 modal 放在根组件里面，然后从子组件触发一个事件上去。
4、Bootstrap给出了一样常用的HTML元素的样式，例如：按钮、表单和文字等等。
5、这篇文章主要介绍了基于 flexible 的 Vue 组件：Toast -- 显示框效果，需要的朋友可以参考下基于flexible.js 的 Vue 组件前言：目前手头的移动端Vue项目是用手淘的 lib-flexible 作适配的，并用px2rem 来自动转换成rem。