Vue.js动态组件模板的实现

组件并不总是具有相同的结构。有时需要管理许多不同的状态。异步进行可能会有所帮助。

示例：

组件模板用于某些网页的多个位置，如通知、注释和附件。让我们看看评论，看看我的意思。注释不再只是简单的文本字段。你希望能够发布链接，上传图片，整合视频等等。所有这些完全不同的元素都必须在这个注释中呈现。如果您试图在组件中执行此操作，它很快就会变得非常混乱。

处理模式

我们应该如何处理这个问题？大多数人可能会先检查所有东西，然后再加载一个特定的组件。像这样的事情：

模板div class=' comment '/comment text/p./p //打开图形图像链接-打开-图形v-if='link.type=='打开-图形' '///常规图像链接-图像v-else-if=' link . type=' image ' '///视频嵌入链接-视频v-else-if=' link . type==' video '/./div/template然而，如果支持的模板列表变得越来越长，这可能在我们的审查案例中——只考虑支持嵌入Youtube、Twitter、Github、Soundcloud、Vimeo、Figma.这份名单没完没了。

动态组件模板

另一种方法是使用某种加载器来加载您需要的模板。这允许您编写这样一个干净的组件：

模板div class=' comment '/comment text/p./p//类型可以是“开放图形”、“图像”、“视频”.dynamic-link : data=' some data ' : type=' type '/div/template看起来好多了，不是吗？让我们看看这个组件是如何工作的。首先，我们必须改变模板的文件夹结构。

就我个人而言，我喜欢为每个组件创建一个文件夹，因为我可以在以后为样式和测试添加更多的文件。当然，如何构建结构取决于您。

接下来，让我们看看如何动态链接/构建这个组件。

模板组件： is=' component ' : data=' data ' v-if=' component '//templatescript export default { name : ' dynamic-link '，prop 3360[' data '，' type']，data(){ return { component : null，} }，computed: { loader() { if(！this . type){ return null } return()=import(` templates/$ { this . type } `)}，}，Mounted () {this.loader()。然后(()={ this . collaboration=()=this . loader()})。catch(()={ this . collaboration=()=import(' templates/default ')})}，}/。默认情况下，Vue.js支持动态组件。问题是您必须注册/导入所有要使用的组件。

模板组件：是=' some component '/component/templatescript some component from '。/some component ' export default { components 3360 { some component，}，}/script这里什么都没有，因为我们想动态地使用我们的组件。所以我们能做的就是使用Webpack的动态导入。当与计算值一起使用时，这就是神奇发生的地方——是的，计算值可以返回一个函数。超级方便！

computed: { loader() { if(！这个。type){ return null } return()=import(` templates/$ { this。type} `)}，}，安装完我们的组件后，我们尝试加载模板。如果出现问题，我们可以设置一个备份模板。向用户显示错误消息可能会有所帮助。

已安装(){this.loader()。然后(()={ this . collaboration=()=this . loader()})。catch(()={ this . collaboration=()=import(' templates/default ')})，结论

如果您对一个组件有许多不同的视图，这可能会很有用。

容易扩展。它是异步的。模板仅在需要时加载。保持代码干净。基本就是这样！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。