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


Posted in Javascript onDecember 02, 2019

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery插件pagination实现分页特效
Apr 12 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
微信小程序入门之指南针
Oct 22 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 #Javascript
vue 动态表单开发方法案例详解
Dec 02 #Javascript
vue 开发之路由配置方法详解
Dec 02 #Javascript
vue 开发企业微信整合案例分析
Dec 02 #Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 #Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 #Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 #Javascript
You might like
PHP SPL使用方法和他的威力
2013/11/12 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
[原创]图片分页查看
2006/08/28 Javascript
JavaScript Archive Network 集合
2007/05/12 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
js实现进度条的方法
2015/02/13 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
python操作xml文件示例
2014/04/07 Python
python optparse模块使用实例
2015/04/09 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python温度转换实例分析
2018/01/17 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
django修改models重建数据库的操作
2020/03/31 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
社区八一活动方案
2014/02/03 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
小学优秀班主任材料
2014/12/17 职场文书
保卫工作个人总结
2015/03/03 职场文书
投诉信回复范文
2015/07/03 职场文书
网吧管理制度范本
2015/08/05 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python