脚本宝典收集整理的这篇文章主要介绍了聊一聊 Vue 里的组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在开发 Vue 项目时,大多数人会选择用官方的 vue-cli 搭建项目的基础。大家也都会使用一些组件库,比如 element-ui,或者自己封装一些组件。那么在日常开发时,大家都会封装哪些组件呢?
我的话会这样分:
1、公共组件
1-1、通用组件库(如 element-ui、iView)
1-2、业务组建(只能在这个项目使用)
2、页面组建(为了拆分复杂度而使用)
指开源的组件库,如 element-ui、iView,都有 table、popover、datepicker 这些常用的组件,使用起来开发快多了。
加分项:
在实际项目开发中,即便使用了组件库,仍然有大量重复的代码,其实我们可以更加精简的去开发,基于通用组件或者其它业务组件之上,再封装一层,让其更加方便的使用。比如在后台管理系统中,经常会有 表格 + 分页 这样的组合,完全可以组合封装起来。下面看个例子:
<template>
<SelectTable
ref="selectTable"
url="/select/table"
:columns="columns">
</SelectTable>
</template>
<script>
import SelectTable from '~/SelectTable'
export default {
components: {
SelectTable
},
data() {
return {
columns: [{
title: '姓名',
key: 'name'
}, {
title: '年龄',
key: 'age'
}, {
title: '身高',
key: 'height',
filter: (value) => value + 'cm'
}, {
title: '性别',
key: 'sex',
filter: (value) => value === 0 ? '女' : '男'
}, {
title: '地址',
key: 'address',
width: 400,
render: (h, param) => {
return <el-button size="small">{param.row.address}</el-button>
}
}]
}
}
}
</script>
上面的代码只有 表格 + 分页 的代码,我们只需要指定少量的配置,就可以生成一个想要的页面。
只需要指定 url (后端的接口地址) 和 columns 就可以实现一个表格,而且还带分页。图片的源码地址
加分项:
减分项:
如果项目里面有多类似的页面,我建议可以做一些封装,否则封装的意义不是很大。
在开发复杂的页面的时候,往往会一个页面有很多的代码,看起来头都大了,这时候我们就可以考虑把其中的一些代码,单独分离出去,不至于一个页面上千甚至上万行代码????。
加分项:
1. 方便维护,把部分独立的业务分离出去
2. 方便定位 bug,只需要保证传进来和传出去的参数正确,就很容易定位到问题
不管怎么说,在开发的时候,尽量把公共的东西抽离,都是一个非常棒的选择。各位对组件还有什么其它看法呢?欢迎讨论( ̄▽ ̄)"。
以上是脚本宝典为你收集整理的聊一聊 Vue 里的组件全部内容,希望文章能够帮你解决聊一聊 Vue 里的组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。