第十七课 component组件解析

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>