Vue动态创建注册component的实例代码
前言
在深入了解Vue动态创建Component前先了解一下常规组件声明形式。
Vue的组件通常可以通过两种方式来声明，一种是通过Vue.component，另外一种则是SingleFileComponents（SFC）单文件组件。
常规组件声明与注册
//定义一个名为button-counter全局注册的组件
Vue.component("button-counter",{
template:'Youclickedme{{count}}times.',
data(){
return{
count:0
}
}
});
newVue({
template:`
AppComponent
在上面的代码中我们声明了一个叫做button-counter的组件。如果在常规情况下使用的话，只需要在页面上写对应的
全局创建注册组件可以实现动态创建，但是我们必须在template声明使用该组件，而且如果把所有组件都全局注册这并不是一个好办法。
在官方文档中我们可以看到，我们可以通过Vue.component('component-name')的方式来注册一个组件。
而组件实例又有$mount这样一个方法，官方对于$mount的解释如下：
vm.$mount([elementOrSelector])
Arguments:
{Element|string}[elementOrSelector]
{boolean}[hydrating]
Returns:vm-theinstanceitself
Usage:
IfaVueinstancedidn'treceivetheeloptionatinstantiation,itwillbein“unmounted”state,withoutanassociatedDOMelement.vm.$mount()canbeusedtomanuallystartthemountingofanunmountedVueinstance.
IfelementOrSelectorargumentisnotprovided,thetemplatewillberenderedasanoff-documentelement,andyouwillhavetousenativeDOMAPItoinsertitintothedocumentyourself.
Themethodreturnstheinstanceitselfsoyoucanchainotherinstancemethodsafterit.
那我们是否可以通过这种方式来达到我们的需求呢？
还不够！
为什么？？？
因为Vue.component返回的结果是一个function！它返回的并不是组件实例，而是一个构造函数。
那到这里其实我们就清楚了。对于Vue.component声明的组件，我们先通过Vue.component获取它的构造函数，再new出一个组件实例，最后通过$mount挂载到html上。
//定义一个名为button-counter全局注册的组件
Vue.component("button-counter",{
template:'Youclickedme{{count}}times.',
data(){
return{
count:0
}
}
});
newVue({
template:`
AppComponent
clicktoinsertbutton-countercomonent