vue全局组件与局部组件简栗

<div id="app">
<button @click="lili">莉莉</button>
<button @click="dudu">嘟嘟</button>
<button @click="aisa">艾萨</button>
<div>
<component :is="now" ></component>
<p>{{now}}</p>
</div>
</div>

let lili = {
template: '<h1>局部组件lili</h1>'
}
let dudu = {
template: '<h1>局部组件dudu</h1>'
}

Vue.component('aisa',{
template: '<h1>我是全局组件aisa!</h1>'
})
// 创建根实例
new Vue({
el: '#app',
data(){
return{
now: 'aisa'
}
},
components: {
'lili': lili,//注册组件
'dudu':dudu,
},
methods:{
lili(){
this.now = "lili"
},
dudu(){
this.now = "dudu"
},
aisa(){this.now = "aisa"}//所有实例都能用全局组件
},
})