全局组件和局部组件

1、全局组件

全局组件可以在多个Vue实例对象中使用

        <div id="app1">
            <!--3.使用全局组件-->
            <my-c></my-c>
        </div>
        <div id="app2">
            <!--3.使用全局组件-->         
            <my-c></my-c>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*1.创建组件构造器*/
            const myC = Vue.extend({
                template: `
                <div>
                    <h2>全局组件</h2>
                </div>`
            })
            /*2.注册组件*/
            Vue.component('my-c',myC);
            
            /*Vue的实例化对象1*/
            const app1 = new Vue({
                el: '#app1'
            })
            
            /*Vue的实例化对象2*/
            const app2 = new Vue({
                el: '#app2'
            })
        </script>

在两个Vue实例对象app1和app2中都能使用全局组件

image.png

2.局部组件（常用）

局部组件创建在Vue实例中，该组件也只能在该实例中使用
局部组件的创建方法：
1.生成组件构造器
2.在Vue实例中注册组件
注册组件在Vue的components属性中操作

            /*1.生成组件构造器*/
            const myCom = Vue.extend({
                template: `
                <div>
                    <h2>局部组件</h2>
                </div>`
            })
            /*Vue的实例化对象1*/
            /*2.在Vue实例中注册组件*/
            const app1 = new Vue({
                el: '#app1',
                components: {
                    myc:myCom
                }
            })

myc就是注册组件的标签名
myCom就是组件构造器

在app1和app2中都使用全局组件和局部组件

        <div id="app1">
            <!--3.使用全局组件-->
            <my-c></my-c>
            <!--使用局部组件-->
            <myc></myc>
        </div>
        <div id="app2">
            <!--3.使用全局组件-->
            <my-c></my-c>
            <!--使用局部组件-->
            <myc></myc>
        </div>

image.png

全局组件在两个Vue实例中都可以显示
局部组件只能在注册他的Vue实例app1中显示
在app2中使用局部组件,<myc></myc>标签不会被解析