vue——10-全局组件 局部组件

组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应组件即可

组件化和模块化的不同：

• 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
• 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；

法一：

全局组件

位置关联下就都可以用

<div id="enjoy">
    
    <my-date>my-date>
    <my-date>my-date>
div>

<hr>

<div id="enjoy1">
    
    <my-date>my-date>
div>

        {
            //1.创建组件构造器
            let Profile = Vue.extend({
                //1.1模板选项
                //通过 template 属性，指定了组件要展示的HTML结构
                //组件模板，必须有且仅有唯一的根元素，下面的都一样
                template: `
                

                
                
hello world!
                
                `
            });

            //2.注册全局组件
            //Vue.component(组件名称，构造器);
            //组件名中出现驼峰式 myDate，则引用变为 my-date(总之引用不要出现大写字母)
            Vue.component('myDate', Profile);

            //3.关联位置（只有在关联位置下才可以使用组件，且关联位置在1和2后面）
            new Vue({
                el: '#enjoy',
            });

            new Vue({
                el: '#enjoy1',
            });
        }

局部组件

仅仅当前可用

<div id="fun">
    
    <my-date>my-date>
    <my-color>my-color>
div>

{
            //1.创建组件构造器
            let Profile = Vue.extend({
                //1.1模板选项
                template: `
                

                
                
hei world!
                
                `
            });

            let Profile1 = Vue.extend({
                //1.1模板选项
                template: `
                

                
                
hei john!
                
                `
            });

            //3.关联位置（只有在关联位置下才可以使用组件）
            new Vue({
                el: '#fun',
                components: {
                    //2.注册局部组件
                    //组件名中不要出现大写字母
                    'my-date': Profile,
                    'my-color': Profile1
                }
            });
        }

法二：

全局组件

<div id="enjoy">
    <my-date>my-date>
    <my-date>my-date>
div>

        {
            Vue.component('my-date', {
                template: `
                <div>
                <input type="date">
                <p>hello world!p>
                div>
                `
            });

            new Vue({
                el: '#enjoy',
            });
        }

局部组件

<div id="fun">
    <my-date>my-date>
    <my-color>my-color>
div>

        {
            new Vue({
                el: '#fun',

                components: {
                    'my-date': {
                        template: `
                <div>
                <input type="date">
                <p>hei world!p>
                div>
                `
                    },

                    'my-color': {
                        template: `
                <div>
                <input type="color">
                <p>hei john!p>
                div>
                `
                    }
                }
            });
        }

法三（外部定义组件）（推荐）：

全局组件

<div id="app">
    <my-com>my-com>
div>



<template id="tmp">
    <div>
        <h5>这是通过 template 元素，在外部定义的组件结构，这个方式有代码的提示和高亮h5>
        <h1>好用!h1>
    div>
template>

    {
        Vue.component('myCom', {
            template: '#tmp'
        });

        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    }

局部组件

<div id="app">
    <my-com>my-com>
div>



<template id="tmp">
    <div>
        <h5>这是通过 template 元素，在外部定义的组件结构，这个方式有代码的提示和高亮h5>
        <h1>好用!h1>
    div>
template>

    {
        let vm = new Vue({
            el: '#app',
            components:{
                'myCom':{
                    template:'#tmp'
                }
            },
            data: {},
            methods: {}
        });
    }