浅谈Vue内置component组件的应用场景
官方的说明
渲染一个“元组件”为动态组件。依 is 的值,来决定哪个组件被渲染。
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>
具体可以官网文档中的
- 动态组件
- 内置的组件component
场景
这里通过一个业务场景来阐述vue内置component组件的应用。 如图所示,这里展示经典注册页面,注册分为邮箱注册和手机注册,弹窗顶部有标签可以切换注册类型,中间是注册表单信息,邮箱注册和手机注册有着不一样的表单内容,底部是注册按钮以及其他操作。 经过分析手机注册界面与邮箱注册除了中间的表单内容不一致之外,其他的界面内容是一样的。
实际项目代码设计中,为了保证复用性和可维护性,是会有一些可行的方案。这里我们采用vue内置的component组件来实现这一点。
核心代码实现
顶部tab切换的时候,type值发生改变,对应的表单的组件也发生了变化
<template><div><a href="javascript:;" @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:;" @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组件可以起到很赞的作用。
比如这样的一个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组件可以依然可以实现这样一个美好的愿景。
比如这样的一个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。
结语
Vue上手简单,文档清晰完备,人生苦短,我用vue。(React粉丝Bie Peng Wo)
更多专业前端知识,请上 【猿2048】www.mk2048.com
浅谈Vue内置component组件的应用场景相关推荐
- vue内置动态组件component使用详解
1 动态组件介绍 component是vue内置组件,主要作用为动态渲染组件,基本用法如下: <!-- 动态组件由 vm 实例的 `componentName` property 控制 --&g ...
- 浅谈Mybatis内置数据源
Mybatis内置数据源 今天的文章稍微没有那么肝,但是还是拖到了晚上!!哈哈哈,其实昨天已经写好了,只不过一直想不到个人唠叨应该写什么,所以就拖了一下. 内置数据源初始化过程 在详细分析 Unpoo ...
- [Professor麦]浅谈Mybatis内置数据源
Mybatis内置数据源 今天的文章稍微没有那么肝,但是还是拖到了晚上!!哈哈哈,其实昨天已经写好了,只不过一直想不到个人唠叨应该写什么,所以就拖了一下. 内置数据源初始化过程 在详细分析 Unpoo ...
- 父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
- 浅谈Vue.js的优势
写在前面 今天小梦跟小伙伴们简简单单聊一下Vue.js的优势.小梦也是刚刚接触Vue.js,在学习一门新的技术之前,我们当然要了解其优势,知道优势在哪更加有利于我们去学习并转换为自己的储备. 浅谈Vu ...
- java get请求 数组,浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...
- 浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型 为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...
- vue.js 数据替换_Vue.js实战笔记之Vue内置指令
指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上. 基本指令 v-clock v-clock 不需要表达式,它会在 Vue 实例结 ...
- Win7下的内置FTP组件的设置详解
Win7下的内置FTP组件的设置详解 在局域网中共享文件,FTP是比较方便的方案之一.Win7内部集成了FTP,只是设置起来颇费一番功夫.着文以记之. 一.安装FTP组件 由于Win7默认没有安装FT ...
最新文章
- 拉勾教育专栏文章转markdown
- 【python】关于python的链表结构实现
- android toast几种使用方法 (转)
- input type=text 无法使用.html(),input type=”text” (Elements) – HTML 中文开发手册
- nodeJS 的 path.resolve() 用法解析
- 【LeetCode笔记】剑指 Offer 20. 表示数值的字符串(Java、字符串)
- 苹果App Store曝出Bug 你遇到了么?
- 字符串大写字符串转小写js_C ++字符串大写和小写
- A - Prime Ring Problem uva524素数环【dfs】
- Linux下的Libsvm使用历程录
- Rocket Kitten 报告
- kali 克隆网页_Web侦察工具HTTrack (网站克隆)
- Unity 角度与旋转(四元数与欧拉角)
- 用c语言写一个文件加密程序,用C语言设计程序进行文件的加密
- Android开机速度优化简单回顾——readahead
- 3315 时空跳跃者的魔法
- PMP备考大全:经典题库(5月)
- Anbox之server端audio播放流程(十二)
- 白话数字签名(3)——Web程序中的数字签名
- 全职高手手游服务器维护,《全职高手》停服停运公告!
热门文章
- vue中请求接口怎么封装公共地址_vue请求接口的封装
- [HDU 4666]Hyperspace[最远曼哈顿距离][STL]
- Linux中拷贝和移动文件
- php中 ob_start()有什么作用
- SQL Server 2008 R2如何生成带数据的数据库脚本
- [单选]物联网产业链的主要产品不包括下列哪一项 - 关于物联网(主讲:柳毅)笔记...
- NHibernate.3.0.Cookbook第三章第9节的翻译
- 介绍 Spring 3.1 M1 中的缓存功能
- DB2 9 底子(730 考试)认证指南,第 3 局部: 拜访 DB2 数据(3)
- 虚拟鼠标代替安卓触屏_美术学院18级虚拟空间设计专业数字图像程序基础课程优秀结课成果展示优秀学生王雨禾作品展示...