component组件解析
component组件的写法在众多组件写法中算是比较简单的，component组件结构组成如下：
1）组件名
2）组件模板
3）利用Vue对象进行生成
基础示例：
<div id="app">
<test></test>
</div>
<script>
Vue.component('test', {
template: '<h1>这是一个组件模板</h1>'
})
new Vue({
el:'#app'
})
</script>
component组件
我们可以通过在实例外部以component的方式拓展单个组件，当前方式需要在构建全局实例之前进行组件创建，不存在组件提升。（类似于变量提升）
1）创建组件
<div id="app">
<test></test>
</div>
<script>
Vue.component('test', {
template: '<h1>这是一个组件模板</h1>'
})
new Vue({
el:'#app'
})
</script>
2）分离模板创建组件
<div id="app">
<test></test>
</div>
<script>
let tem = {
template: '<h1>这是一个组件模板</h1>'
}
Vue.component('test', tem);
new Vue({
el:'#app'
})
</script>
3）通过components拓展组件
components和methods类似，表示（组件）集合，我们也可以直接通过components进行组件拓展
<div id="app">
<test></test>
</div>
<script>
new Vue({
el:'#app',
components: {
'test': {
template: '<h1>这是一个组件模板</h1>'
}
}
})
</script>
驼峰式命名
驼峰式命名在使用的时候，需要将调用的组件名转换成横杠式
<div id="app">
<test-me></test-me>
</div>
<script>
Vue.component('testMe', {
template: '<h1>这是一个组件模板</h1>'
})
new Vue({
el:'#app'
})
</script>
组件中的DOM包裹规则
1）单DOM组件
<div id="app">
<test></test>
</div>
<script>
Vue.component('test', {
template: '<h1>这是一个组件模板</h1>'
})
new Vue({
el:'#app'
})
</script>
2）多DOM组件
如果组件涉及的DOM较多，必须要将所有DOM包裹在一个主DOM中，否则将报错
<div id="app">
<test></test>
</div>
<script>
Vue.component('test', {
template: '<div><h1>这是一个组件模板</h1><h1>这是第二个组件模板</h1></div>'
})
new Vue({
el:'#app'
})
</script>
3）配合ES6模板语法使用
<div id="app">
<test></test>
</div>
<script>
Vue.component('test', {
template: `<div>
<h1>这是一个组件模板</h1>
<h1>这是第二个组件模板</h1>
</div>`
})
new Vue({
el:'#app'
})
</script>