vue动态注册组件实例代码详解

写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API，最开始研究它只是用来实现一个tab切换的功能，使用起来也蛮不错的。

is

预期：string | Object (组件的选项对象)

用于动态组件且基于 DOM 内模板的限制来工作。

示例：

<!-- 当 `currentView` 改变时，组件也跟着改变 --><component v-bind:is="currentView"></component>

详见vue API中关于is的定义和用法

至于用在tab切换中，大概就是：

<template> <div> 　　<div>#动态组件实现tab切换效果#</div><br><br><br> 　　　　<nav> 　　　　　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(first);">{{first}}</a>   　 　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(second);">{{second}}</a>   　　　 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(third);">{{third}}</a> 　　　　</nav>　　　　　<first :is="currentView" keep-alive></first>　　 </div></template><script>import first from 'components/first';import second from 'components/second';import third from 'components/third';export default {  data () {    return {     first: "first",    second: "second",    third: "third",    currentView: 'first',    };   },   components: {     first,    second,    third   },   methods: {    toggleTabs (tabText) {     this.currentView = tabText;    }   } }</script>

但是今天，一个前端同行在群里问我“如果当前页面是根据传进来的参数的不同而显示不同的组件，而且当前页面中可能会import进来几十个子组件，而我又不想挨个去import这些组件，同时这些组件又是按需加载的，该咋实现？” 说实话，一开始我也懵了。

我在想，实在不行就用const demo = () => import ( './demo.vue')，或者在组件的components:中按需引入：

components: { demo: () => import ( './demo.vue')}

但是我一想，也不对啊，这样虽然能实现按需加载，但是还是要挨个import这些组件，还是没有解决实际的问题。

经过查阅资料发现，vue有一个extend的方法可以实现。那么这个extend方法到底是干嘛的？

Vue.extend( options )

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生成组件实例，并挂载到自定义元素上。