Vue中全局组件与局部组件

**

Vue中全局组件与局部组件

**
Vue中的组件与普通语言中的变量类似有局部变量也有全局变量，限制条件也是相同的
全局组件
在注册组件的时候是在new Vue({})外面注册的话，是全局组件，也就表示任何一个vue实例对象都可以使用。
下面将定义两个Vue对象

let app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        components:{
            app1Comp: app1Comp
        }
    });


    let app2 = new Vue({
        el: "#app2"
    })

第一个作用对象id是app第二个作用对象的id是app2的div
接下来我们进行全局尝试调用

<div id="app">
    <my-comp></my-comp>
    <app1-comp></app1-comp>
</div>

<div id="app2">
    <my-comp></my-comp>
    <app1-comp></app1-comp>
</div>

发现全局经过一次注册全局皆可调用成功
局部组件

const app1Comp = Vue.extend({
        template: `
            <div>
                <p>只有app1才能使用的组件</p>
            </div>
        `
    })

    let app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        components:{
            app1Comp: app1Comp
        }
    });

在上述的代码中我们定义了一个appcomp的组件，注意在注册的时候我们只将其注册到了app的vue对象中，那么除了在对应的vue对象中的组件其他的一律不能使用，这就是局部组件。