Vue.js的动态组件模板

组件并不老是具备相同的结构。有时须要管理许多不一样的状态。异步执行此操做会颇有帮助。

实例：

组件模板某些网页中用于多个位置，例如通知，注释和附件。让咱们来一块儿看一下评论，看一下我表达的意思是什么。
评论如今再也不仅仅是简单的文本字段。您但愿可以发布连接，上传图像，集成视频等等。必须在此注释中呈现全部这些彻底不一样的元素。若是你试图在一个组件内执行此操做，它很快就会变得很是混乱。

处理方式

咱们该如何处理这个问题？可能大多数人会先检查全部状况，而后在此以后加载特定组件。像这样的东西：

<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>

这里没有任何东西，由于咱们想要动态地使用咱们的组件。因此咱们能够作的是使用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')
        })
},

结论

若是您有一个组件的许多不一样视图，则可能颇有用。

• 易于扩展。
• 它是异步的。模板仅在须要时加载。
• 保持代码干净。

基本上就是这样！ 若是你已经使用过这种技术，我很想听听你的看法，谢谢！