组件并不总是具有相同的结构。有时需要管理许多不同的状态。异步执行此操作会很有帮助。
实例:
组件模板某些网页中用于多个位置,例如通知,注释和附件。让我们来一起看一下评论,看一下我表达的意思是什么。 评论现在不再仅仅是简单的文本字段。您希望能够发布链接,上传图像,集成视频等等。必须在此注释中呈现所有这些完全不同的元素。如果你试图在一个组件内执行此操作,它很快就会变得非常混乱。
![7b9719de51209bc36af663d702ec1fc2.png](https://i-blog.csdnimg.cn/blog_migrate/5d3a09a48751f9b0e00a1f3fa7953c9a.jpeg)
处理方式
我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件。像这样的东西:
![ca4649210ddfa40278ce6fe759ebb258.png](https://i-blog.csdnimg.cn/blog_migrate/cfd74556ffce3a238b2a6e425e7f9b03.jpeg)
但是,如果支持的模板列表变得越来越长,这可能会变得非常混乱和重复。在我们的评论案例中 - 只想到支持Youtube,Twitter,Github,Soundcloud,Vimeo,Figma的嵌入......这个列表是无止境的。
动态组件模板 另一种方法是使用某种加载器来加载您需要的模板。这允许你编写一个像这样的干净组件:
![558162a7549c835aeece861e6ed0436d.png](https://i-blog.csdnimg.cn/blog_migrate/45fe0b5577b840b3cb27c3168680f734.jpeg)
看起来好多了,不是吗?让我们看看这个组件是如何工作的。首先,我们必须更改模板的文件夹结构。
![dbba79a68fcf5e6c81bd9f14fb969e2d.png](https://i-blog.csdnimg.cn/blog_migrate/9a95456fff379d4a7b272ff8666b009a.jpeg)
就个人而言,我喜欢为每个组件创建一个文件夹,因为可以在以后添加更多用于样式和测试的文件。当然,您希望如何构建结构取决于你自己。
接下来,我们来看看如何<dynamic-link />构建此组件。
![fa7d87f9079f587bfc332de1bd534cda.png](https://i-blog.csdnimg.cn/blog_migrate/b5f7a5c0909f1384084a551060f67df0.jpeg)
那么这里发生了什么?默认情况下,Vue.js支持动态组件。问题是您必须注册/导入要使用的所有组件。
![46e6d8a18c62ff227e331b9434db0f7a.png](https://i-blog.csdnimg.cn/blog_migrate/a29cc9f9a33fa524c3c977215d9824e2.jpeg)
这里没有任何东西,因为我们想要动态地使用我们的组件。所以我们可以做的是使用Webpack的动态导入。与计算值一起使用时,这就是魔术发生的地方 - 是的,计算值可以返回一个函数。超级方便!
![f64c240b9ee0f80e2d12657037e4ffe6.png](https://i-blog.csdnimg.cn/blog_migrate/bdf793976d5fa5960771d3a770d1ee7b.jpeg)
安装我们的组件后,我们尝试加载模板。如果出现问题我们可以设置后备模板。也许这对向用户显示错误消息很有帮助。
![1752504e38b02011e7c5bd1452eb4aff.png](https://i-blog.csdnimg.cn/blog_migrate/f30954cecc9a032a1b2599ec6cf0a267.jpeg)
结论
如果您有一个组件的许多不同视图,则可能很有用。
- 易于扩展。
- 它是异步的。模板仅在需要时加载。
- 保持代码干净。
基本上就是这样!
如果你已经使用过这种技术,我很想听听你的见解,谢谢!