注册组件的语法糖写法

1.全局注册组件语法糖

全局组件不用语法糖的构建过程：
生成组件构造器

            /*全局组件构造器*/
            const cpnC1 = Vue.extend({
                template: `
                    <div>
                        <h2>全局组件</h2>
                    </div>
                `
            })

注册组件

            /*注册全局组件*/
            Vue.component('cpn1',cpnC1);

使用组件

        <div id="app">
            <cpn1></cpn1>
        </div>

全局注册组件的语法糖，省略extend步骤，直接在注册组件的第二参数中创建组件构造器

1.语法糖写法下，注册组件的参数

image.png

2.全局注册组件的语法糖写法

            Vue.component('cpn1',{
                template: `
                    <div>
                        <h2>全局组件</h2>
                    </div>              
                `
            })

image.png

在html中使用全局组件

2.局部注册组件语法糖

局部注册组件不用语法糖的构建过程：
生成组件构造器

            const cpnC2 = Vue.extend({
                template: `
                    <div>
                        <h2>局部组件</h2>
                    </div>              
                `
            })

在Vue实例中注册局部组件

            const app = new Vue({
                el: '#app',
                components: {
                    cpn2: cpnC2
                }
            })

使用局部组件

        <div id="app">
            <cpn2></cpn2>
        </div>

image.png

注册局部组件时，components对象中，一对key value对应的是组件标签和组件构造器，使用语法糖注册时，在value构造器的位置，传入构造器的具体代码

            const app = new Vue({
                el: '#app',
                components: {
                    cpn2: {
                        template: `
                            <div>
                                <h2>局部组件</h2>
                            </div>              
                        `
                    }
                }
            })

image.png

在html中使用局部组件

image.png

3.总结注册组件的语法糖写法

            /*全局注册组件语法糖*/       
            Vue.component('cpn1',{
                template: `
                    <div>
                        <h2>全局组件</h2>
                    </div>              
                `
            })

            const app = new Vue({
                el: '#app',
                components: {
                    cpn2: {
                        template: `
                            <div>
                                <h2>局部组件</h2>
                            </div>              
                        `
                    }
                }
            })

image.png