Vue中动态组件加载

背景：在vue中，内容过多，需要采用分解成不同的组件，在父组件中引入子组件，常见的有静态引入（在某一个组件中指定引入某一个子组件）以及动态引入（在组件中根据不同的场景需要使用不同的子组件），通常使用于对话框的封装中。

用法1:
通常在vue项目中，需要在组件中引入子组件，常见的方法：

   在html中直接引入，此时子组件是写死的，不能改变

<div><my-component/>
</div>

 在js中引入一个my-component组件,这样就可以直接使用，显示对应子组件的内容

import my-component from './my-component'
exports default {components:{my-component}
}

用法2:动态加载子组件，根据不同的情景加载不同的组件

html中

<div><component ref="child" :is="currentComponent"/>
</div>

通过is的值来动态绑定当前使用哪个子组件

js中：

import A from './a'
import B from './b'
import C from './c'export default{components:{A ,B,C}
}

在vue中引入了三个组件A，B，C，具体在html中使用哪个，需要根据当前的currentComponent的值来判断，如果当前的值是A，那引入的子组件为A，如果为B，那引入的子组件为B