Vue_非单文件组件

1 绑定Vue对象管理的容器 

    {{globalData1.name}}
    
    
    /*这是全局组件*/
    
    /*这是组件复用*/
    
    


    {{globalData2.name}}
    /*这是全局组件*/
    

 2 创建组件

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

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

		return{
			bDataName:"b"
		}
	}
})

const globalComponent = Vue.extend({
	template:`
组件{{globalComponentName}}
`,
	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"
	    }
    }
})