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

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

组件化和模块化的不同：

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

法一：

全局组件

位置关联下就都可以用

<div id="enjoy">
    <!--4.使用组件-->
    <my-date></my-date>
    <my-date></my-date>
</div>

<hr>

<div id="enjoy1">
    <!--4.使用组件-->
    <my-date></my-date>
</div>

        {
            //1.创建组件构造器
            let Profile = Vue.extend({
                //1.1模板选项
                //通过 template 属性，指定了组件要展示的HTML结构
                //组件模板，必须有且仅有唯一的根元素，下面的都一样
                template: `
                <div>
                <input type="date">
                <p>hello world!</p>
                </div>
                `
            });

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

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

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

局部组件

仅仅当前可用

<div id="fun">
    <!--4.使用组件-->
    <my-date></my-date>
    <my-color></my-color>
</div>

{
            //1.创建组件构造器
            let Profile = Vue.extend({
                //1.1模板选项
                template: `
                <div>
                <input type="date">
                <p>hei world!</p>
                </div>
                `
            });

            let Profile1 = Vue.extend({
                //1.1模板选项
                template: `
                <div>
                <input type="color">
                <p>hei john!</p>
                </div>
                `
            });

            //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>

<!-- 在被控制的 #app 外面，使用 template 元素，定义组件的HTML模板结构 -->
<!--<script type="text/template" id="tmp"></script> 也可以定义组件模板，不常用-->
<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>

<!-- 在被控制的 #app 外面，使用 template 元素，定义组件的HTML模板结构 -->
<!--<script type="text/template" id="tmp"></script> 也可以定义组件模板，不常用-->
<template id="tmp">
    <div>
        <h5>这是通过 template 元素，在外部定义的组件结构，这个方式有代码的提示和高亮</h5>
        <h1>好用!</h1>
    </div>
</template>

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