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

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


用例

在 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.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

React 中 setState()详细解读

对于 setState() 相信伙伴们都用过,它是 React 官方推荐用来更新组件 state 的 API,但是对于 setState() 你真的了解吗?且待我慢慢详聊一番。语法1: setState(updater[, callback])

vue中如何实现的自定义按钮

在实际开发项目中,有时我们会用到自定义按钮;因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就派上了大用场,我们把定义好的按钮组件导出,在全局引用,就可以在其他组件随意使用啦,这样可以大幅度的提高我们的工作效率。

使用Vue 3.0做JSX(TSX)风格的组件开发

不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方,让我难以接受。所以在很长一段时间,我都在尝试寻找React的替代品,我尝试过不少别的前端框架,但都有各种各样的问题或限制

Vue组件的操作:自定义组件,动态组件,递归组件

v-model双向绑定创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件。v-model指令在内部使用不同的属性为不同的输入元素抛出不同的事件。

vue 文字横向无缝走马灯组件

marquee标签已经废弃了,只能手动实现文字走马灯样式,父组件引入 import myMarquee from ./my-marquee

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

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

vue实现一个全局Message组件

不知道大家在用一些UI框架,比如Element-ui的时候,有没有觉得一些全局组件。this.$message(),this.Toast()等,用起来很爽。他们不像其他的组件,需要去导入,去注册。麻烦的很。

深入探讨前端组件化开发

前端组件化开发,已经有多年的历史了,不管是服务端渲染,还是前端SPA,都有了比较成熟的组件化开发的方案。 随着组件化开发的普及,前端社区中贡献了很多不错的前端组件,都提供开箱即用的方案,使得更好的发挥组件化的优势。

react之如何写一个管理自有状态的自定义组件

函数组件类似一个纯函数,接受外部传入的参数,生成并返回一个React元素(伪DOM)。例如,如下,Greeting作为一个组件,接受传入的参数name,并返回一个内容已填充的p标签。

Vue子父组件方法互调

讲干货,不啰嗦,大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,现做一下总结,希望对大家有所帮助。设置子组件的ref

点击更多...

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

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

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