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


Posted in Javascript onNovember 26, 2018

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

实例:

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

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>

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

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

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

接下来,我们来看看如何<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')
  })
},

结论

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

  • 易于扩展。
  • 它是异步的。模板仅在需要时加载
  • 。保持代码干净。

基本上就是这样!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 #Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 #Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 #Javascript
Vuex的初探与实战小结
Nov 26 #Javascript
微信小程序页面间值传递的两种方法
Nov 26 #Javascript
Vue中的methods、watch、computed的区别
Nov 26 #Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 #Javascript
You might like
数据库查询记录php 多行多列显示
2009/08/15 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
Python中属性和描述符的正确使用
2016/08/23 Python
Python编程之string相关操作实例详解
2017/07/22 Python
pandas分区间,算频率的实例
2019/07/04 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
药学专业大专生的自我评价
2013/12/12 职场文书
教师评优事迹材料
2014/01/10 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
应届毕业生自荐信
2014/05/28 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
教师先进事迹材料
2014/12/16 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Vue的过滤器你真了解吗
2022/02/24 Vue.js