Vue.js的动态组件模板

Richard_Gao 发布于2019-08-23 13:42 / 2468人阅读

摘要：实例组件模板某些网页中用于多个位置，例如通知，注释和附件。动态组件模板另一种方法是使用某种加载器来加载您需要的模板。那么这里发生了什么默认情况下，支持动态组件。超级方便安装我们的组件后，我们尝试加载模板。

组件并不总是具有相同的结构。有时需要管理许多不同的状态。异步执行此操作会很有帮助。

实例：

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

处理方式

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

但是，如果支持的模板列表变得越来越长，这可能会变得非常混乱和重复。在我们的评论案例中 - 只想到支持Youtube，Twitter，Github，Soundcloud，Vimeo，Figma的嵌入......这个列表是无止境的。

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

看起来好多了，不是吗？让我们看看这个组件是如何工作的。首先，我们必须更改模板的文件夹结构。

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

接下来，我们来看看如何构建此组件。

那么这里发生了什么？默认情况下，Vue.js支持动态组件。问题是您必须注册/导入要使用的所有组件。

这里没有任何东西，因为我们想要动态地使用我们的组件。所以我们可以做的是使用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")
        })
},

结论

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

易于扩展。

它是异步的。模板仅在需要时加载。

保持代码干净。

基本上就是这样！
如果你已经使用过这种技术，我很想听听你的见解，谢谢！

GPU云服务器云服务器 vuejs动态组件父子组件-动态渲染动态添加组件微信泛型动态添加组件c

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99410.html

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

摘要：动态组件模板另一种方法是使用某种加载器来加载所需的模板。这是怎么工作的默认情况下，支持动态组件。问题是您必须注册导入您想要使用的所有组件。最近刚做完建站工具，准备总结里面使用到的一些技巧，同时会做一版简化的放在 github上。先来一篇翻译的文章，和我在项目中使用的动态组件思路一样，不过缺少了演化的过程，直接给出了最终的解决方案。这篇文章给的场景也很简单，但要了解这种思想是足够的。...

Tamic 2019-08-23 18:41 评论0 收藏0
VueJS 如何编译服务器端远程模板【异步组件+简单方法】

摘要：，常规组件，卒。小结总之呢，上面分析了在中编译远程模板的可能性，最后得出了两种方法异步组件，应该是官方的推荐方法动态组件，变通之法，论坛上发现的思路当然如果有其他方法欢迎交流，本文如果有不严谨不正确的地方也欢迎指出本文发自我的，原文链接我的说明有些时候你可能需要从后台获取模板，并在前台在自己编译，这在用 AngularJS 1.x 的时候似乎很常见，可以直接用 ng-include...

褰辩话 2019-08-01 17:30 评论0 收藏0
VueJS 如何编译服务器端远程模板【异步组件+简单方法】

摘要：，常规组件，卒。小结总之呢，上面分析了在中编译远程模板的可能性，最后得出了两种方法异步组件，应该是官方的推荐方法动态组件，变通之法，论坛上发现的思路当然如果有其他方法欢迎交流，本文如果有不严谨不正确的地方也欢迎指出本文发自我的，原文链接我的说明有些时候你可能需要从后台获取模板，并在前台在自己编译，这在用 AngularJS 1.x 的时候似乎很常见，可以直接用 ng-include...

2i18ns 2019-08-20 19:00 评论0 收藏0
Vue.js-组件详解

摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。学习笔记：组件详解组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

jeffrey_up 2019-08-23 16:02 评论0 收藏0
快速入门 - Vue2 Tutorials (一)

摘要：在这个组件里面有一些链接列表，和，这些列表直接使用编写按照传统的写法，如果我们需要往里面添加链接的时候，每次我们都得添加和标签。所以修改如下这样我们就把数据和视图分开了，模板里面的代码也简洁了很多，不再需要写很多重复的代码。 Vue 的官方文档对 Vue 介绍非常详细，但官方文档使用在 HTML 中引入 vue 的方式进行讲解，而实际项目中一般使用脚手架如 vue-cli 初始化项目...

djfml 2019-08-20 17:47 评论0 收藏0