浅谈Vue内置component组件的应用场景


Posted in Javascript onMarch 27, 2018

官方的说明

渲染一个“元组件”为动态组件。依 is 的值,来决定哪个组件被渲染。

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

具体可以官网文档中的

动态组件

 内置的组件component

场景

这里通过一个业务场景来阐述vue内置component组件的应用。 如图所示,这里展示经典注册页面,注册分为邮箱注册和手机注册,弹窗顶部有标签可以切换注册类型,中间是注册表单信息,邮箱注册和手机注册有着不一样的表单内容,底部是注册按钮以及其他操作。 经过分析手机注册界面与邮箱注册除了中间的表单内容不一致之外,其他的界面内容是一样的。

浅谈Vue内置component组件的应用场景

实际项目代码设计中,为了保证复用性和可维护性,是会有一些可行的方案。这里我们采用vue内置的component组件来实现这一点。

核心代码实现

顶部tab切换的时候,type值发生改变,对应的表单的组件也发生了变化

<template>
 <div>
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleCloseBtnClick"></a>
	<div>
	 <h3>新用户注册</h3>
	 <div>
		<span :class="{active: type === 'mobileForm'}" @click="type = mobileForm">手机注册</span>
		<span :class="{active: type === 'emailForm'}" @click="type = emailForm">邮箱注册</span>
	 </div>
	</div>
	<component :is="type" ref="form">
	 <button @click="handleRegisterBtnClick">注册</button>
	 <div ><span ><span>注册视为同意</span><a> 《法律条款和隐私说明》</a></span></div>
	 <div><span>已有账号<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleLoginBtnClick">直接登入>></a></span></div>
	</component>
 </div>
</template>
<script>
 export default {
 	methods: {
		handleRegisterBtnClick () {
		 	this.$refs.form.validateData().then(() => {
				this.$refs.form.getFormData()
			})
		 }
	}
 }
</script>

mixins混合

用Vue内置component组件情况下,一般实际被渲染的组件具有一定的共性,比如相同的属性,相同的方法或者相同的初始化销毁过程。比如目前这个场景中邮箱表单和手机表单都具有校验方法(validateData)和获取表单数据方法(getFormData)。 这种情况下可以使用vue提供的混合的功能。进一步抽离 mixins.js

export default {
 methods: {
  validateData() {
   return Promise.resolve()
  },
  getFormData() {
   return {}
  }
 }
}

email-form.vue

<script>
import minx from './mixins'
export default {
 mixins: [mixins],
 methods: {
  getFormData() {
   return { email: 'example@example.com' }
  }
 }
}
</script>

如果有自定义的需求,可以重写mixins中的方法。

表格的应用

在管理后台项目中,表格经常会被用到。我们希望表格的td是文本、进度条、checkbox等等,且希望通过传一个json配置就可以渲染出。使用vue内置的component组件可以起到很赞的作用。

浅谈Vue内置component组件的应用场景 

比如这样的一个table使用方式

<template>
 <vue-table ref="table" :columns="columns" :datum="datum"></vue-table>
</template>
<script>
export default {
  data () {
   return {
    columns: [
     { title: 'ID', width: '30', dataKey: 'id' },
     { title: '进度组件', dataKey: 'progress', render: { type: 'progress2', max: 100, precision: 2 } }
    ],
    datum: [{ id: '1', name: '进度0', progress: 10 }]
   }
  }
 }
</script>

table中使用component的实现

<td v-for="column of columns">
	<component :is="`${TYPE_PRE}${columns.render.type}`" :row-data="rowData" :params="columns.render"></component>
</td>

表单的应用

在管理后台项目中,表单也经常需要用到,我们也同样希望表单的某一项是文本框,下拉框,时间选择框,富文本等等等等,且希望通过传一个json配置就可以渲染出。vue内置的component组件可以依然可以实现这样一个美好的愿景。

浅谈Vue内置component组件的应用场景 

比如这样的一个form使用方式

<template>
  <c-form :cells="cells" ref="form">
   <button class="button is-primary" :class="{ 'is-disabled': isSubmitBtnDisabled }" @click.prevent="submit">提交</button>
  </c-form>
</template>
<script>
  export default {
  computed: {
   cells () {
    return [
     {
      field: 'name',
      label: '名称',
      type: 'textfield',
      attrs: { placeholder: '名称' },
      validate: { required: { message: '请输入名称'} }
     },
     {
      field: 'enable',
      label: '启用标志',
      type: 'dropdown',
      extra: {options: [{ label: '启用', value: 1 }, { label: '禁用', value: 2 }] }
     }
    ]
   }
  }
 }
</script>

form中使用component的实现

<form>
 <c-form-cell v-for="cell of cellList" :key="cell.field" :field="cell.field">
  <component
	 :is="`${TYPE_PRE}${cell.type}`"
	 :field="cell.field"
	 :attrs="cell.attrs"
	 :extra="cell.extra"
	 :validate="cell.validate"
	 :cells="cell.cells">
  </component>
 </c-form-cell>
</form>

表单和表格在 基于VUE的后台引擎 开源项目中都有实现,欢迎star和fork。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 #Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 #Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 #Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 #Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 #Javascript
Angular中使用better-scroll插件的方法
Mar 27 #Javascript
使用node打造自己的命令行工具方法教程
Mar 26 #Javascript
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
mysql limit查询优化分析
2008/11/12 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php 定义404页面的实现代码
2012/11/19 PHP
提高PHP编程效率的方法
2013/11/07 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python实现Linux中的du命令
2017/06/12 Python
python版本单链表实现代码
2018/09/28 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
2015财务年终工作总结范文
2015/05/22 职场文书
创业计划书详解
2019/07/19 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript