VUE 动态组件的应用案例分析

 更新时间:2019年12月02日 11:57:04   作者:自由港  
这篇文章主要介绍了VUE 动态组件的应用,结合具体案例形式分析了vue.js动态组件的应用场景、解决方案及相关操作技巧,需要的朋友可以参考下

本文实例讲述了VUE 动态组件的应用。分享给大家供大家参考,具体如下:

业务场景

我们在开发表单的过程中会遇到这样的问题,我们选择一个控件进行配置,控件有很多中类型,比如文本框,下来框等,这些配置都不同,因此需要不同的配置组件来实现。

较常规的方法是使用v-if 来实现,这样界面看上去比较复杂,而且需要进行修改主页面。

解决方案

可以使用动态组件来实现,为了体现动态组件的特性,我们简化实现方式,编写两个简单的组件来测试一下这个功能。

文本组件配置:

<template>
 <div>
  我是单行文本框{{config.type}}
 </div>
</template>
<script>
 export default {
  name:"rx-textbox-config",
  props:{
   config:Object
  }
 }
</script>
<style>
</style>

这个组件我统一配置一个config 的对象属性,配置一个type 属性。

多行文本框配置:

<template>
 <div>
  我是多行文本框{{config.name}}
 </div>
</template>
<script>
 export default {
  name:"rx-textarea-config",
  props:{
   config:Object
  }
 }
</script>
<style>
</style>

这里我配置一个 name的属性。

在调用界面做写如下代码,导入组件

export default {
 name: 'App',
 components: {
  rxTextboxConfig,
  rxTextareaConfig,
 }

使用动态组件:

<component :is="currentConfig" :config="config"></component>

使用代码切换组件

this.currentConfig=ctlType +"-config";
if(ctlType=="rx-textbox"){
 this.config.type="VARCHAR";
}
if(ctlType=="rx-textarea"){
 this.config.name="我是富文本框";
}

这里写if 只是为了体现这个特性,实际实现不用这种方式。

希望本文所述对大家vue.js程序设计有所帮助。

相关文章

  • Vue3使用slot插槽的实现

    Vue3使用slot插槽的实现

    插槽在真实的开发中使用非常的多,比如我们去用一些第三方组件库的时候,通常都需要通过自定义插槽来实现内容的自定义,本文主要介绍了Vue3使用slot插槽的实现,感兴趣的可以了解一下
    2023-12-12
  • 在vue中v-for循环遍历图片不显示错误的解决方案

    在vue中v-for循环遍历图片不显示错误的解决方案

    这篇文章主要介绍了在vue中v-for循环遍历图片不显示错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • vue-amap安装和用法步骤

    vue-amap安装和用法步骤

    vue-amap是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。接下来通过本文给大家介绍vue-amap安装和使用,需要的朋友可以参考下
    2021-12-12
  • Vue.js设计与实现无限递归学习总结

    Vue.js设计与实现无限递归学习总结

    这篇文章主要为大家介绍了Vue.js设计与实现无限递归学习总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Vue+express+Socket实现聊天功能

    Vue+express+Socket实现聊天功能

    这篇文章主要为大家详细介绍了Vue+express+Socket实现聊天功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 为什么推荐使用JSX开发Vue3

    为什么推荐使用JSX开发Vue3

    这篇文章主要介绍了为什么推荐使用JSX开发Vue3,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • 7个很棒的Vue开发技巧分享

    7个很棒的Vue开发技巧分享

    这篇文章主要为大家整理了7个很棒的Vue开发技巧,可以帮助大家更好的理解和使用vue框架。文中的示例代码讲解详细,感兴趣的可以了解一下
    2023-02-02
  • Vue树表格分页的实现方法详解

    Vue树表格分页的实现方法详解

    这篇文章主要介绍了Vue树表格分页的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • element-ui重置resetFields()不生效的解决

    element-ui重置resetFields()不生效的解决

    本文主要介绍了element-ui重置resetFields()不生效的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • Vue项目三级联动路由跳转与传参的思路详解

    Vue项目三级联动路由跳转与传参的思路详解

    这篇文章主要介绍了Vue项目三级联动的路由跳转与传参的思路详解,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08

最新评论