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下利用fso判断文件是否存在的代码
Dec 11 Javascript
Javascript 面试题随笔
Mar 31 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
深入理解vue中的$set
Jun 01 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
用webpack4开发小程序的实现方法
Jun 04 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
Python缓存技术实现过程详解
2019/09/25 Python
django 模型中的计算字段实例
2020/05/19 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
卫生安全检查制度
2014/02/04 职场文书
销售助理岗位职责
2014/02/21 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
三严三实学习心得体会
2014/10/13 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
委托培训协议书
2014/11/17 职场文书
离职感谢信
2015/01/21 职场文书
《小小的船》教学反思
2016/02/18 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS