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

 更新时间:2018年11月26日 13:48:21   作者:james   我要评论
这篇文章主要介绍了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>

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


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

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

结论

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

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

基本上就是这样!

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

相关文章

  • Django与Vue语法的冲突问题完美解决方法

    Django与Vue语法的冲突问题完美解决方法

    这篇文章主要介绍了Django与Vue语法的冲突问题完美解决方法,本文给大家分享了两种解决方法,需要的朋友参考下吧
    2017-12-12
  • 详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

    详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

    这篇文章主要介绍了Vue+ElementUI从零开始搭建自己的网站(一、环境搭建),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue使用技巧及vue项目中遇到的问题

    vue使用技巧及vue项目中遇到的问题

    这篇文章主要介绍了vue使用技巧及vue项目中遇到的问题,本文给大家带来的只是一部分,后续还会持续更新,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-06-06
  • 详解vue-cli3多环境打包配置

    详解vue-cli3多环境打包配置

    这篇文章主要介绍了vue-cli3多环境打包配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 详解vue.js下引入百度地图jsApi的两种方法

    详解vue.js下引入百度地图jsApi的两种方法

    这篇文章主要介绍了详解vue.js下引入百度地图jsApi的两种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解vue 项目白屏解决方案

    详解vue 项目白屏解决方案

    这篇文章主要介绍了详解vue 项目白屏解决方案,详细的介绍了白屏的解决方案,非常具有实用价值,需要的朋友可以参考下
    2018-10-10
  • vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略

    vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略

    这篇文章主要介绍了Vue.extend 和 data的合并策略 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue工程全局设置ajax的等待动效的方法

    vue工程全局设置ajax的等待动效的方法

    这篇文章主要介绍了vue工程全局设置ajax的等待动效的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • Vue.js中 v-model 指令的修饰符详解

    Vue.js中 v-model 指令的修饰符详解

    v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。这篇文章通过实例代码给大家介绍Vue.js中 v-model 指令的修饰,感兴趣的朋友跟随小编一起看看吧
    2018-12-12
  • 解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

    解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

    这篇文章主要介绍了解决VUE在封装了Axios后手动刷新页面拦截器无效的问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11

最新评论