Vue——全局、局部、父子组件，template模板（二）

全局组件：

Vue.component("my-data",{
    template:`
        <div>
            <input type="date">
            <p>sgw最帅</p>
        </div>
    `
});

测试：

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

 

局部组件

let vm = new Vue({
    el: '#app',
    components:{
        "my-data":{
            //1.1模块选项
            template:`
        <div>
            <input type="date">
            <p>sgw最帅</p>
        </div>
    `
        },
    }
});

父子组件

let child1 = Vue.extend({
    //1.1模块选项
    template:`
        <div>
            <input type="date">
            <p>sgw最帅</p>
        </div>
    `
});
let child2 = Vue.extend({
    //1.1模块选项
    template:`
        <div>
            <input type="date">
            <p>sgw最帅</p>
        </div>
    `
});
//2.注册个组件
Vue.component("my-data",{
    components:{
        'my-child1': child1,
        'my-child2': child2,
    },
    template:`
        <div>
            <my-child1></my-child1>
            <my-child2></my-child2>

      </div>`

});

 

模板创建组件

<template id="my_div">
    <div>cyc最帅</div>
</template>
<script src="js/vue.js"></script>


    <script>
        Vue.component("my-data",{
            template: '#my_div',


        })
        //1.创建新实例
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                msg: 'sgw',
            }

        })
    </script>