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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
js window.event对象详尽解析
2009/02/17 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
jquery中动态效果小结
2010/12/16 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
webpack3+React 的配置全解
2017/08/21 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
大三学生入党思想汇报
2014/01/02 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
股指期货心得体会
2014/09/10 职场文书
受伤赔偿协议书
2014/09/24 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书