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

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82728613

全局组件

位置关联下就都可以用

<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: `
                <div>
                <input type="date">
                <p>hello world!</p>
                </div>
                `
            });

            //2.注册全局组件
            //Vue.component(组件名称，构造器);
            //组件名中不要出现大写字母
            Vue.component('my-date', 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>
                `
                    }
                }
            });
        }