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"
}
}
})