浅谈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 相关文章推荐
jquery sortable的拖动方法示例详解
Jan 16 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
php中文件上传的安全问题
2006/10/09 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jquery tools之tooltip
2009/07/25 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Python函数式编程
2017/07/20 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python ini文件常用操作方法解析
2020/04/26 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
安全生产检查通报
2014/01/29 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
司法局火灾防控方案
2014/06/05 职场文书
员工薪酬激励方案
2014/06/13 职场文书
项目合作意向书模板
2014/07/29 职场文书
2016特色励志班级口号
2015/12/24 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL