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实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
js a标签点击事件
Mar 30 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
JavaScript中双向数据绑定详解
May 03 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
vue接口请求加密实例
Aug 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php 传值赋值与引用赋值的区别
2010/12/29 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
php多进程应用场景实例详解
2019/07/22 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
python获取Linux发行版名称
2019/08/30 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
方正Java笔试题
2014/07/03 面试题
音乐专业自荐信
2014/02/07 职场文书
法律专业求职信
2014/05/24 职场文书
《司马光》教学反思
2016/02/22 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
python基础之文件操作
2021/10/24 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技