浅谈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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
js中typeof的用法汇总
Dec 12 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
axios基本入门用法教程
Mar 25 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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
PHP编程函数安全篇
2013/01/08 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
Bootstrap Table使用整理(三)
2017/06/09 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
企业申诉管理制度
2014/01/30 职场文书
销售冠军获奖感言
2014/02/03 职场文书
司法所长先进事迹
2014/06/02 职场文书
nginx访问报403错误的几种情况详解
2022/07/23 Servers