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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 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
缅甸的咖啡简史
2021/03/04 咖啡文化
PHP文件下载类
2006/12/06 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
node中koa中间件机制详解
2017/08/22 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
javascript回调函数详解
2018/02/06 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
自我鉴定四大框架
2014/01/17 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
三万活动总结
2014/04/28 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python