注册组件

组件分为全局注册组件和局部注册组件，全局组件使用Vue.component()方法，有两个参数，第一个参数自定义组件的名字，第二个参数是一个函数对象，函数对象使用Vue.extend()方法创建的组件构造器，也可以是一个选项对象。在实际开发中我们全用组件的方式去写项目。接下来看一下组件如何使用。

在注册一个组件的时候，需要给它一个名字。看一下全局注册组件的代码示例:

<div id="app" v-cloak>
    <public-component></public-component>
</div>
Vue.component("PublicComponent",{
        data(){
            return {
                title:"我是公共组件"
            }
        },
        template:`
            <div>
                {{title}}
            </div>
        `
    });
    new Vue({
        el:"#app"
    })

全局组件注册

如果是在非DOM模板中比如字符串模板或是单文件组件内，是可以使用原始名称来使用组件的，即<PublicComponent>和<public-component>都可使用。代码如下：

 Vue.component("PublicComponent",{
        data(){
            return {
                title:"我是公共组件"
            }
        },
        template:`
            <div>
                {{title}}
            </div>
        `
    });
 new Vue({
        el:"#app",
        template:`
            <div>
                <PublicComponent></PublicComponent>
            </div>
        `
    })
注意：在template里面写内容必须要用一个根元素来包裹，且只能有一个根元素，切记，上面的代码在template里面用的根元素是div标签。

也可以使用Vue.extend方法来创建组件构造器，代码如下：

Vue.component("PublicComponent",Vue.extend({
        data(){
            return {
                title:"我是公共组件"
            }
        },
        template:`
            <div>
                {{title}}
            </div>
        `
    }));

局部注册组件

全局注册往往是不够理想的。比如，如果使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便有一个组件不再使用了，它仍然会被包含在最终的构建结果中。这造成了用户下载了无谓的JavaScript代码。

<div id="app" v-cloak>
    <input-component></input-component>
</div>
new Vue({
        el:"#app",
        components:{
            InputComponent:{
                data(){
                    return {
                        name:"张三"
                    }
               },
                template:`
                    <div>
                        <input type="text" v-model="name" />
                    </div>
                `
            }
        }
    })

当然局部组件也可以用Vue.extend()方法创建组件构造器，代码如下：

components:{
            InputComponent:Vue.extend({
                data(){
                    return {
                        name:"张三"
                    }
                },
                template:`
                    <div>
                        <input type="text" v-model="name" />
                    </div>
                `
            })
        }

其实这样写组件维护起来不是很方便，可以用对象字面量的方式去创建组件，代码如下：

<div id="app" v-cloak>
    <input-component></input-component>
</div>
let InputComponent={
        data(){
            return {
                name:"张三"
            }
        },
        template:`
                    <div>
                        <input type="text" v-model="name" />
                    </div>
                `
    }
new Vue({
        el:"#app",
        components:{
            InputComponent
        }
    })

当然组件之间也可以嵌套使用，代码如下:

//全局组件
    let PublicComponent={
        template:`
            <div>全局组件</div>
        `
    }
    Vue.component("PublicComponent",PublicComponent);
    //局部组件A
    let AComponent={
        template:`
                    <div>
                    <!--使用全局组件-->
                    <PublicComponent></PublicComponent>
                        我是A组件
                    </div>
                `
    }
//局部组件B
    let BComponent={
        template:`
                    <div>
                        <!--使用全局组件-->
                        <PublicComponent></PublicComponent>
                        <!--使用A组件-->
                        <AComponent></AComponent>
                        我是B组件
                    </div>
                `,
        components:{
            //注册A组件
            AComponent
        }
    }
new Vue({
        el:"#app",
        components:{
            //注册B组件
            BComponent
        },
        template:`
            <div>
                <!--使用B组件-->
                <BComponent></BComponent>
            </div>
        `
    })