1、全局组件
<div id="box">
<aaa></aaa>
</div>
var Aaaa=Vue.extend({
template:"<h3>我是h3</h3>"
});
Vue.component('aaa',Aaa);
注：数据，组件里的数据必须是data：function(){}且必须是return一个对象
2
Vue.component({
template:"<h3>我是h3</h3>",
data:function{
return {
};
}
})
3局部组件：放到某个组件内部
<div id=‘box’>
<aaa></aaa>
</div>
var Aaa=Vue.extend({
template:'<h3>这是h3</h3>',
});
var vm=new Vue({
el:"#box",
components:{
’aaa’:Aaa//局部组件注意：'aaa'多个字符比如my-aa时必须添加单引号‘my-aa’
}
})；
动态组件
<div id=‘box’>
<button value="aaa" v-on:click="a='aaa'" ></button>
<button value="bbb" v-on:click="a='bbb'" ></button>
<component v-bind:is="a"></component>
</div>
var vm=new Vue({
el:"#box",
components:{
'aaa':{
template:'<h3>这是aaa组件</h3>',
}，
'bbb':{
template:'<h3>这是bbb组件</h3>',
}
}
})；