VUE 全局组件 和 局部组建

1全局组建

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


<script>
    //<!--组建构造器-->
    //1 创建组建
    let Profile = Vue.extend({
        //1.1模版选项
        template:`
            <div>
                <input type="date">
                <p>今天已经是凌晨了</p>
            </div>
        `
    });
    //2 注册全局组建
    Vue.component('my-date',Profile);


    new Vue({
        el:"#app",
        data:{
            msg:'今天还是要赚钱'
        }
    });
    new Vue({
        el:"#app1",
        data:{
            msg:'今天还是要赚钱'
        }
    });
</script>

2.局部组建

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



<script>
    //1.组建构造器
    let profile = Vue.extend({
        //1.模版选项
        template:`
            <div>
                <input type="text">
                <p>组建模版1</p>
            </div>
        `
    });
    let profile2 = Vue.extend({
        //1.模版选项
        template:`
            <div>
                <input type="text">
                <p>组建模版2</p>
            </div>
        `
    });

    new Vue({
        el:"#app",
        components:{  //局部组建的钩子选项 只能存在与#app中
            'my-date':profile
        },

    });


   
</script>

全局+局部组建精简写法

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

<script>
    //1.全局组建简易版
    Vue.component('my-date',{
        //1.组建名+模版
        template:`
            <div>
                <input type="text">
                <p>组建模版精简版</p>
            </div>
        `
    })


    new Vue({
        el:"#app",
        components:{
            'my-model':{
                template:`
                    <div>
                        <p>组建模版精简版2</p>
                    </div>
                `
            }
        }

    });

</script>