组件一：全局组件和局部组件

• 全局组件[要注册一个全局组件，可以使用 Vue.component(tagName, options)]【注意点：组件在注册之后，便可以作为【自定义元素】在一个实例的模板中使用，确保在初始化根实例之前注册组件。】

html: <my-global></my-global>

 <section id="global">
        <h4>全局组件</h4>
        <my-global></my-global>
</section>

<div id="com2">
    <my-global></my-global>
</div>

javascript：

Vue.component('my-global', {
    template: '<div>!{{msg}}</div>',
    data(){//data 必须是函数
        return {msg: "A global component"};
    }
});
//创建根示例

new Vue({
  el: '#global'

});
//创建第二个实例

const vm2 = new Vue({
    el:"#com2"
});

页面渲染为：

实例#global的结果：

实例#com2的结果

 

 

• 局部组件[注意点：注册仅在其作用域中可用的组件]

html:

<section id="local">
        <h4>局部组件</h4>
        <my-local></my-local>
    </section>

 

javascript:

const child = {
    template: '<div>A local component!</div>'
};
const vm = new Vue({
    el:"#local",
    data:{
    },
    components:{//局部组件
        "my-local":child
    }
});

 

页面渲染：

 

 

 总结：全局组件可以每个实例都可以使用，而局部组件只能在某个作用域【某实例】下可用。