Vue的全局组件

Vue就是一个组件化的过程，一般我们使用组件的步骤是这样的

首先我们需要创建一个组件构造器：

	<div id="app"></div>
    <script src="./js/vue.js"></script>
    <script>
        //1、创建一个组件构造器
        let Profile=Vue.extend({
            //模板选项
            template:`
                <div>
                    <input type='date'>
                    <p>今天已经是快入春了</p>
                </div>
            `
        })
        var vm=new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
    </script>

注册全局组件：

	<div id="app"></div>
    <script src="./js/vue.js"></script>
    <script>
        //1、创建一个组件构造器
        let Profile=Vue.extend({
            //模板选项
            template:`
                <div>
                    <input type='date'>
                    <p>今天已经是快入春了</p>
                </div>
            `
        })
        
        //2、注册全局组件
        //后面括号里传入的是（组件名，构造器）
        Vue.component('my-date',Profile)
        
        var vm=new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
    </script>

调用组件

	<div id="app">
        <my-date></my-date>
    </div>

此时，我们创建的就显示出来啦~

而且，全局组件也可以调用多次，想调用几次就调用几次

	<div id="app">
        <my-date></my-date>
        <my-date></my-date>
        <my-date></my-date>
        <my-date></my-date>
    </div>

其实全局组件还有另一种更简单的写法

	//创建组件构造器
        let Profile=Vue.extend({
            //1、1模板选项
            template:`
                <div>
                    <input type='date'>
                    <p>今天已经是冬天了</p>
                </div>
            `
        })

        //2、注册全局组件
        Vue.component('my-date',Profile)

可以把上面的两步，简化成一步：

 		Vue.component('my-date',{
            //1、1模板选项
            template:`
                <div>
                    <input type='date'>
                    <p>今天已经是冬天了</p>
                </div>
            `
        })

效果是一样的~