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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了如何基于Vue2实现动态折扣表格,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
这篇文章主要介绍了vue中使用unity3D如何实现webGL将要呈现的效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
今天小编就为大家分享一篇vue实例中data使用return包裹的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
在日常开发中随着需求的个性化,逻辑的复杂化,自定义组件也变得越来越常见,这篇文章主要给大家介绍了关于vue进度条组件实现(可拖拽可点击)的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue element input如何让浏览器不保存密码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue setInterval 定时器失效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本篇文章主要介绍了详解vue事件对象、冒泡、阻止默认行为，这里整理了详细的代码,有需要的小伙伴可以参考下。2017-03-03
Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解
这篇文章主要介绍了Vue项目代码之路由拆分、Vuex模块拆分、element按需加载,项目较大路由较多时，路由拆分是一个不错的代码优化方案，按不同业务分为多个模块，结构清晰便于统一管理，本文通过示例给大家详细讲解，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了不依任何赖第三方,单纯用vue实现Tree 树形控件的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家详细介绍了vue实现签到日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论