Vue_非单文件组件

1 绑定Vue对象管理的容器 

<div id="root1">
    {
   
   {globalData1.name}}
    <a></a>
    <b></b>
    /*这是全局组件*/
    <globalComponent ></globalComponent >
    /*这是组件复用*/
    <a></a>
    <b></b>
</div>
<div id="root2">
    {
   
   {globalData2.name}}
    /*这是全局组件*/
    <globalComponent ></globalComponent >
</div>

 2 创建组件

const a =  Vue.extend({
	template:`<div>{
   
   {aName}}</div>`,
	data(){
		return{
			aName:"a"
		}
	}
})

const b = Vue.extend({
	template:`<div>{
   
   {bDataName}}</div>`,
	data(){

		return{
			bDataName:"b"
		}
	}
})

const globalComponent = Vue.extend({
	template:`<div>组件{
   
   {globalComponentName}}</div>`,
	data(){
		return{
			globalComponentName:"全局组件"
		}
	}
})

3 注册组件（全局注册，局部注册）

//全局注册组件
Vue.component('globalComponent',globalComponent)
new Vue({
    el:"root1",
    data:{
        globalData:{
		    name:"全局数据1"
	    }
    },
    //局部注册组件
    components:{
	    a,
	    b
    }
})

new Vue({
    el:"root2",
    data:{
        globalData2:{
		    name:"全局数据2"
	    }
    }
})