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