使用vue.js的动态组件模板

时间: 2019-07-15阅读: 268标签: 组件
组件并不总是具有相同的结构。有时需要管理许多不同的状态(注:指的是根据不同状态显示不同组件)。异步加载组件对此操作很有帮助。


用例

在 Scrumpy 中组件用于提醒、评论和附件等多个地方。让我们看一下评论部分,看看我要表达的是什么意思。

评论不再只是简单的文本字段,你希望能够发布链接,上传图片,集成视频等等。所有这些完全不同的元素都必须在此评论中呈现出来。如果您试图在一个组件中执行此操作,它很快就会变得一团糟。


最常见的评论有链接、图像和视频

我们如何处理这个问题?可能大多数人会判断所有的情况,加载特定的组件,例如这样:

<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>

在 < dynamic-link /> 组件中,没有注册/导入任何组件,我们想要动态使用我们的组件。所以我们可以做的是使用 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')
      })
},

结论:

  1. 如果您有一个组件要展示许多不同视图,则可能很有用。
  2. 这种方式易于扩展。
  3. 它是异步的,模板仅在需要时加载。
  4. 保持代码简洁(DRY)

原文:https://medium.com/scrumpy/dynamic-component-templates-with-vue-js-d9236ab183bb



吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/4198

vue组件之间互相传值:父传子、子传父

在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性或者借助子组件的ref数性。

运用 Vue 中的无状态组件

状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了。简单的说,状态是一个包含应用程序使用的最新值的对象。但是,如果咱们从结构的、更抽象的角度来看待它,就会清楚地看到

开发一个高质量的前端组件,这些姿势一定要知道

NPM 无论从知名度、模块数量、社区的话题数量来看,都算得上是一骑绝尘,将其他语言的模块仓库远远甩在了后面。NPM 的生态既已如此成熟,按说开发者对于 NPM 包的发布和维护应该非常熟悉才是

React组件设计:重新认识受控与非受控组件

React 官网中对非受控组件与受控组件作了如图中下划线的边界定义。一经推敲, 该定义是缺乏了些完整性和严谨性的, 比如针对非表单组件(弹框、轮播图)如何划分受控与非受控的边界?

BEM举例

一个组件可能有不同状态。状态应该使用修饰符类来实现。不要单独使用修饰符。修饰符的作用是增加而不是替换基类。更复杂的组件含有子元素。在某些情况下,您可能希望更改组件中的单个元素。

让你的组件千变万化,Vue slot 剖玄析微

Vue 代码中的 slot 是什么,简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。看了上面这句官方解释,可能一样不知道 slot 指的是什么

Vue组件库搭建实践与探索

在以前传统的前端页面开发方式时,存在协同困难,可复用性差的问题,导致开发和维护都不是一件简单的事。而组件化思想的提出,以及Vue、React等MV*框架的快速流行,让我们开始尝试用组件化的思想去开发

Vue动态加载组件

使用import导入组件,可以获取到组件;使用import导入组件,直接将组件赋值给componet;使用require 导入组件,可以获取到组件;使用require 导入组件,直接将组件赋值给componet

vue的provide / inject 有什么用?

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。provide/inject平时用的比较少,多数用于开发组件,但某些情况下还是很好用的。

Vue组件、自定义属性、自定义事件

一个vue文件就是一个组件。组件将html标签/css样式/对应JS打包成一个整体,也可以理解钻进一个具有样式和特效的自定义标签。自定义属性、使用自定义属性

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全