使用vue.js的动态组件模板

最近刚作完建站工具，准备总结里面使用到的一些技巧，同时会作一版简化的放在 github上。

先来一篇翻译的文章，和我在项目中使用的动态组件思路同样，不过缺乏了演化的过程，直接给出了最终的解决方案。这篇文章给的场景也很简单，但要了解这种思想是足够的。以后再详细的总结我遇到的问题和解决方案，放在更复杂的场景中。

如下是翻译正文：

组件并不老是具备相同的结构。有时须要管理许多不一样的状态（注：指的是根据不一样状态显示不一样组件）。异步加载组件对此操做颇有帮助。

用例

在 Scrumpy 中组件用于提醒、评论和附件等多个地方。让咱们看一下评论部分，看看我要表达的是什么意思。

评论再也不只是简单的文本字段，你但愿可以发布连接，上传图片，集成视频等等。全部这些彻底不一样的元素都必须在此评论中呈现出来。若是您试图在一个组件中执行此操做，它很快就会变得一团糟。

最多见的评论有连接、图像和视频

咱们如何处理这个问题?可能大多数人会判断全部的状况，加载特定的组件，例如这样：

<template>
  <div class="comment">
      // comment text    
      <p>...</p>
  
      // open graph image
      <link-open-graph v-if="link.type === 'open-graph'" />
      // regular image
      <link-image v-else-if="link.type === 'image'" />
      // video embed
      <link-video v-else-if="link.type === 'video'" />
      ...
  </div>
</template>

可是，若是所支持的模板列表变得愈来愈长，这就会变得很是混乱和重复。以咱们的评论为例——想要支持嵌入Youtube、Twitter、Github、Soundcloud、Vimeo、Figma……这个列表是无穷无尽的。

动态组件模板

另外一种方法是使用某种加载器来加载所需的模板。这容许你写一个干净的组件像这样:

<template>
    <div class="comment">
        // comment text    
        <p>...</p>
    
        // type can be 'open-graph', 'image', 'video'...
        <dynamic-link :data="someData" :type="type" />
    </div>
</template>

看起来好多了，不是吗?让咱们看看这个组件是如何工做的。首先，咱们更改模板的文件夹结构。

就我我的而言，我喜欢为每一个组件建立一个文件夹，由于稍后能够添加更多用于样式化和测试的文件。固然，如何构建结构取决于您。

接下来，咱们来看看如何构建这个 < dynamic-link /> 组件。

<template>
    <component :is="component" :data="data" v-if="component" />
</template>
<script>
export default {
    name: 'dynamic-link',
    props: ['data', 'type'],
    data() {
        return {
            component: null,
        }
    },
    computed: {
        loader() {
            if (!this.type) {
                return null
            }
            return () => import(`templates/${this.type}`)
        },
    },
    mounted() {
        this.loader()
            .then(() => {
                this.component = () => this.loader()
            })
            .catch(() => {
                this.component = () => import('templates/default')
            })
    },
}
</script>

这是怎么工做的？默认状况下，Vue.js支持 动态组件。问题是您必须注册/导入您想要使用的全部组件。👎

<template>
    <component :is="someComponent"></component>
</template>
<script>
import someComponent from './someComponent'
export default {
    components: {
        someComponent,
    },
}
</script>

在 < dynamic-link /> 组件中，没有注册/导入任何组件，咱们想要动态使用咱们的组件。因此咱们能够作的是使用 Webpack的动态导入。 与计算值一块儿使用时，这就产生了神奇的魔力 - 是的，计算值能够返回一个函数。 超级方便！🙌

computed: {
    loader() {
        if (!this.type) {
           return null
        }
        return () => import(`templates/${this.type}`)
    },
}

使用组件后，咱们尝试加载模板。 若是出现问题咱们能够设置后备模板。 这对向用户显示错误消息颇有帮助。

mounted() {
  this.loader()
      .then(() => {
          this.component = () => this.loader()
      })
      .catch(() => {
          this.component = () => import('templates/default')
      })
},

结论：

1. 若是您有一个组件要展现许多不一样视图，则可能颇有用。
2. 这种方式易于扩展。
3. 它是异步的，模板仅在须要时加载。
4. 保持代码简洁(DRY)。

若有误差欢迎指正学习，谢谢。

若是对你有帮助，请关注【前端技能解锁】：