vue 动态组件

<div id="box">
<input type="button" value="aaa组件" @click="aaa" />
<input type="button" value="bbb组件" @click="bbb" />
<component :is='a'></component>
</div>
<template id="aaa">
<div> <h3>我是aaa组件</h3><input type='button' value='按钮' @click='add' />{{num}}</div>
</template>
<script type="text/javascript">
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
methods:{
aaa:function(){
this.a='aaa'
},
bbb:function(){
this.a='bbb'
}

},
components:{
'aaa':{
data(){
return {
num:1
}
},
methods:{
add(){
this.num++
}
},
template:"#aaa"
},
'bbb':{
template:"<div>我是bbb组件</div>"
}
}
})
</script>