组件并不总是具有相同的结构。有时需要管理许多不同的状态。异步执行此操作会很有帮助。
实例:
组件模板某些网页中用于多个位置,例如通知,注释和附件。让我们来一起看一下评论,看一下我表达的意思是什么。
评论现在不再仅仅是简单的文本字段。您希望能够发布链接,上传图像,集成视频等等。必须在此注释中呈现所有这些完全不同的元素。如果你试图在一个组件内执行此操作,它很快就会变得非常混乱。
<强>处理方式
我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件。像这样的东西:
& lt; template>
& lt; div类="评论"比;//评论文本
& lt; p>……& lt;/p>//打开图形图像
& lt; link-open-graph v="链接。类型===开放图谱”/比;//普通的图像
& lt; link-image v-else-if="链接。类型===形象”/比;//视频嵌入
& lt; link-video v-else-if="链接。类型==='视频' "/比;
…
& lt;/div>
& lt;/template>
但是,如果支持的模板列表变得越来越长,这可能会变得非常混乱和重复。在我们的评论案例中——只想到支持Youtube, Twitter, Github,一夜,Vimeo, Figma的嵌入……这个列表是无止境的。
<强>动态组件模板
另一种方法是使用某种加载器来加载您需要的模板。这允许你编写一个像这样的干净组件:
& lt; template>
& lt; div类="评论"比;//评论文本
& lt; p>……& lt;/p>//类型可以“开放图谱”,“图像”、“视频”……
& lt;动态链接:数据=" https://www.yisu.com/zixun/someData ": type="类型"/比;
& lt;/div>
& lt;/template>
看起来好多了,不是吗?让我们看看这个组件是如何工作的。首先,我们必须更改模板的文件夹结构。
就个人而言,我喜欢为每个组件创建一个文件夹,因为可以在以后添加更多用于样式和测试的文件。当然,您希望如何构建结构取决于你自己。
接下来,我们来看看如何& lt;动态链接/祝辞构建此组件。
& lt; template>
& lt;组件:=白榧?https://www.yisu.com/zixun/data=笆荨眝=白榧?比;
& lt;/template>
& lt; script>
出口默认{
名称:“动态链接”,
道具:“数据”,“类型”,
数据(){
返回{
组件:空,
}
}，
计算:{
加载程序(){
如果(! this.type) {
返回null
}
返回()=比;进口(“模板/$ {this.type}”)
}，
}，
安装(){
this.loader ()
不要犹豫(()=比;{
this.component=()=比;this.loader ()
})
.catch(()=比;{
this.component=()=比;进口(“模板/违约”)
})
}，
}
& lt;/script>
那么这里发生了什么?默认情况下,Vue.js支持动态组件。问题是您必须注册/导入要使用的所有组件。
& lt; template>
& lt;组件:=" someComponent "祝辞& lt;/component>
& lt;/template>
& lt; script>
从“进口someComponent。/someComponent '
出口默认{
组件:{
someComponent,
}，
}
& lt;/script>
这里没有任何东西,因为我们想要动态地使用我们的组件,所以我们可以做的是使用Webpack的动态导入。与计算值一起使用时,这就是魔术发生的地方,是的,计算值可以返回一个函数。超级方便!
计算:{
加载程序(){
如果(! this.type) {
返回null
}
返回()=比;进口(“模板/$ {this.type}”)
}，
},
安装我们的组件后,我们尝试加载模板。如果出现问题我们可以设置后备模板。也许这对向用户显示错误消息很有帮助。
安装(){
this.loader ()
不要犹豫(()=比;{
this.component=()=比;this.loader ()
})
.catch(()=比;{
this.component=()=比;进口(“模板/违约”)
})
},
