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')
})
},
结论
如果您有一个组件的许多不同视图，则可能很有用。
- 易于扩展。
- 它是异步的。模板仅在需要时加载
- 。保持代码干净。
基本上就是这样！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue与iframe之间的信息交互的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
本文主要介绍了Vue实现侧边导航栏于Tab页关联的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了vue cli升级webapck4的步骤以及需要注意的地方，大家可以跟着操作学习下。2018-04-04
这篇文章主要为大家介绍了vue中使用axios请求post接口,请求会发送两次原因解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
本文主要介绍了Vite3迁移Webpack5的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了Vue如何基于vue-i18n实现多国语言兼容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了Vue 中可以定义组件模版的几种方式以及他们之间的一些差别，需要的朋友可以参考下2019-08-08
组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件，这篇文章主要介绍了什么是Vue3的组合式 API,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue3如何实现变量双向绑定问题,具有很好的参考价值,希望对大家有所帮助,2023-11-11
最近在vue.js项目发布后发现了一个关于路径的问题，发现网上关于这个的资料较少，所以给大家总结下，下面这篇文章主要给大家介绍了如何解决关于vue.js发布后路径引用的问题，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
最新评论