Vue中的动态加载组件

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