SOURCE

try {
  // 同步加载组件
  const vm1 = Vue.extend({
    template: '<div> vm1 </div>'
  });
  const vm2 = Vue.extend({
    template: '<div> vm2 </div>'
  });
  const selectView = Vue.extend({
    data() {
      return {
        view: 'vm1'
      }
    },
    watch: {
      view(val) {
        this.$emit('change', val);
      }
    },
    template: `
			<div>
        <select name="view" id="view" v-model="view">
          <option value="vm1">vm1</option>
          <option value="vm2">vm2</option>
          <option value="vm3">vm3</option>
        </select>
      </div>
		`
  });
  
  // 异步加载组件
  const vm3 = Vue.extend({
    template: '<div> vm3 </div>'
  });
	
  // 组件配置
  const Conf = {
	 	// 异步组件
		vm3: {
      name: 'vm3', 
      src: 'http://....' 
   	},
      
    // 同步组件
		vm1: {
      name: 'vm1'
    }
  }
  
  // 组件
  const module = {
    'vm1': vm1,
    'vm2': vm2,
    'selectView': selectView
  };
  
  const app = new Vue({
    el: '#app',
    data() {
      return {
        currentView: 'vm1'
      }
    },
    components: module,
    methods: {
      viewChange(view) {
        this.currentView = view
      }
    },
    created() {
      // 工厂模式注册组件
      for (let key in Conf) {
        if (Conf[key].src) {
          Vue.component(key, (resolve, reject) => {
            loadAsync(Conf[key].src).then((com) => {
              module[key] = com;
              resolve(com);
            });
          });
        }
      }
    }
  });
	
  // 模拟异步加载
  function loadAsync(url) {
    // return fetch(url).then() ......
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('loaded');
        resolve(vm3);
      }, 2000);
    });
  }
}
catch(err) {
  console.log(err);
}

<div id="app">
  <component :is='currentView'></component>
  <select-view ref='select' v-on:change="viewChange"></select-view>
</div>