Vue.js动态组件模板

在使用vue.js开发项目时，我们时常会遇到这样一种需求，同一个容器里根据不同的状态加载不同的组件，一般当我们的组件个数可控，并且数量不多时，常选用以下写法：（home.vue--父组件）

根据不同的type值加载不同的模板。home

我们需要提前import所有我们可能需要加载的子组件，但当我们的子组件越来越多，模板列表变得越来越多时，代码就会变得混乱和重复，维护起来非常棘手，并且后期扩展也是一个大问题。这时候就需要使用动态组件模板。我们可以编写一个公共的子组件模板，并引入当前文件。

1、home.vue为父组件。

2、linkComponet为子组件公共模板。

文件目录结构如下：

components下包含link文件夹，和home组件。link文件夹包含index组件和templates文件夹。

apage,bapge,cpage分别为需要动态加载的子组件。

home.vue如下：【父组件】

父组件

link---index.vue 【子组件动态加载模板】

当apage,bpage,cpage下文件不为index.vue时，则loader(）函数中返回时的引用路径就需要改变。假设三个文件夹下的文件名分别为apage.vue， bpage.vue 和cpage.vue，则import路径应为 “./templates/${this.type}/${this.type}”

在link--index种我们使用了动态导入，与computed配合使用，在computed中，我们可以返回一个函数。

props中的page则是父组件传递的type，我们需要根据page的变化来动态加载组件。

在父组件home中，我们用select来模仿type值的变化，在link中watch到props的变化后，就赋值给type，通过计算属性动态加载需要的子组件。

笔记

优点：

1、可实现同一组件内按需加载不同内容；

2、代码简洁易懂，可扩展性强；

3、动态组件只在需要的时候才会加载。