Vue动态组件的实现is vs extend

1. is属性指定组件名
首先引入所有将要使用的组件并进行局部组件注册，然后动态指定组件的名字即可实现动态组件的切换

<template>
	<div>
		<component :is="componentName"></component>
	</div>
<template>
<script>
export default {
	data() {
		return {
			componentName: '***'
		}
	},
	components: {
		componentName1: () => import('**/**/**.vue')
		componentName2: () => import('**/**/**.vue')
		// 需要用的组件全部引入，难受的很
		componentName3: () => import('**/**/**.vue')
	}
}
</script>

2. extend 创建动态组件
使用基础 Vue 构造器，创建一个“子类”，参数是一个包含组件选项的对象。所以使用的时候需要new实例化，然后设置挂载节点el或者借助$mount() 进行挂载。

    getComponent() {
      const name = 'DynamicComponent'
      import(`../components/${name}.vue`).then(component => {
        // component 包裹在defualt内
        const Component = Vue.extend(component.default)
        new Component({
          el: this.$refs.dynamic_component,
          data: function() {
            return {
              name: '我是通过extend构造器生成的动态组件'
            }
          }
        })
      })
    }

3. extend 创建异步组件
根据请求接口返回的template生成对应的组件

generateAsyncComponent() {
	generateAsyncComponent().then(template => {
		Vue.extend({
		  template,
		  data: function() {
		     return {
		       name: '构造器-异步组件'
		     }
		  }
		});
	})
}
 
// 全局注册
Vue.component('global-component', globalComponent)

// 局部注册包含两种方式进行挂载 el 和 $mount()
new globalComponent().$mount(this.$refs.mount_point)
new globalComponent({ el: this.$refs.mount_point})