什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：
将模板字符串，定义到script标签种：
❝注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！❞
看来上面的这些定义，应该还不能很好得去理解，下面来逐个方式使用完整代码来进行示例。
这两种的写法效果都是一样的，下面分别来示例一下看看。
image-20200203153127665
image-20200203153648824
在上面创建的两个组件示例中，可以看到两个组件的命名是「驼峰法命名」（myCom1, myCom2），那么使用组件引用的时候，需要设置为-的写法： <my-com1></my-com1> <my-com2></my-com2>
打开浏览器查看报错的信息如下：
错误提示如下：
(found in <root style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;">)</root>
可以看到错误信息就是说找不到元素 mycom1, 请确认是否正确注册该组件。
image-20200203155104479
查看浏览器正确显示组件的信息，如下：
image-20200203155234341
可以看到已经可以正常渲染组件的内容了，那么组件还可以重复多次渲染，每次渲染引用则会单独创建一个新的对象。
image-20200203155701528
查看浏览器显示如下：
image-20200203160247395
image-20200204001021591
将mycom3在模板中使用，并且浏览器查看如下：
image-20200204001236328
image-20200204001258623
在上面的示例中，讲解了如何去定义、注册全局组件的两种方式，但是还没有暴露一个问题。
这个在上面的说明中有提到要注意，那么这个问题到底是什么问题呢？
在组件的template定义模板内容中，上面的示例的内容大致如下：
image-20200204002549883
从图中看到我前面的示例中的template内容只写了一个html元素，下面来看看如果写多个html元素会如何报错，如下：
image-20200204003334683
在浏览器中查看错误如下：
image-20200204003421986
错误信息如下：
这个错误信息就是因为在template中写了两个html元素导致的，在Vue框架中对于组件是只能有一个唯一的根元素的。因为这两个html元素相互独立，那么就相当于有两个「根元素」。
解决的办法就是再写一个div来包裹这两个元素，保证只有一个唯一的根元素。
image-20200204003733797
再回到浏览器，查看信息如下：
image-20200204003810650
好了，从这里已经可以看出template的组件内容可以写多个html元素，并且可以写得比较复杂。如果当作字符串一直写是挺麻烦的，又没有命令提示，体验很差。
那么可以将这部门的字符串内容提取出来，写到一个template标签中。
image-20200204004452774
浏览器显示如下：
image-20200204004510541
可以看到正常显示模板内容。
上面讲诉的内容是如何定义全局组件，但是还有一种情况就是需要定义私有组件，因为并不是每个组件都需要进行全局共享的。
那么这时候只需要将组件定义到vm实例中的components属性内即可。
image-20200204110402788
在一个html文件中可以创建多个vm实例的，下面在浏览器打开来看看效果，如下：
image-20200204110819376
image-20200204112958971
在浏览器查看一下效果，如下：
image-20200204113035642
image-20200204113149079
打开浏览器查看，如下：
image-20200204113254079
可以看到vm2实例因为没有注册这个组件，所以直接引用就会报错。如果要解决这个问题，那么就需要在vm2也注册这个组件。
image-20200204113436534
浏览器展示如下：
image-20200204113509997
image-20200210214836666
可以看到下面的简写方式就是将组件对象直接写在components下。下面将已经简写与未简写的两种放行进行对比。