**样式污染问题**
复制组件的时候,不要复制样式。
最好在最外层包裹一个class,作为这个组件专用的样式,要不如果有更改就会影响到其他组件的样式。
或者加scope,也是改组件专用,构建后会自动加一串代码。比如:.btnbiv [data-32522112412]{……}
否则只有style的样式,就是全局样式了,如果class名称一样,会相互影响的,后引入的样式会覆盖掉先引入的样式。
多处都用的样式,放在common.css中。
一些报错问题
**key值重复问题**
如果给模板中的元素设置key,需要设置成唯一的key。重复的 key 会造成渲染错误。
如果:key="index"会重复的话,加一些符号,比如其他字段,组合在一起保证key值唯一。
有一些table显示问题,也是可以通过加key值来解决,比如切换后表格列数据显示异常,给table加一个key就可以了。加key之后会重新渲染,生成一个新的table。
TypeError: Cannot read property '***' of undefined
一般变量未定义错误,或者直接取对象里的未定义的值时也会报这个错误
也可能是插件引入问题,没找到插件
TypeError: Cannot read property of undefined(reading '方法名')
$nextTick 用法
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
// DOM 还没有更新 this.dialogVisitor = true this.$nextTick(function () { // DOM 更新了 // 执行一些方法 })
this.不好使的时候,考虑在方法开头给this重新赋值
const vm=this
写一次即可,不要多次赋值
**element组件,props变量接收到的数据类型不匹配报错问题**
比如要求是数组,结果接收的是一个对象,就会报错
比如要求是字符串‘0’,结果接收的是数值0
这个具体是什么类型,是element组件定义的,看一下文档就知道了
控制台报错,翻译一下看看是什么错误,一般情况下搜报错英文百度都能找到答案
**尽量组件化**
比如,档案管理案卷列表上方 增加一个新功能,需要添加一个按钮,点击按钮,弹窗进行之后功能的操作,这个弹窗单独写一个组件,而不是写在案卷列表组件里。
在子组件内操作打开,关闭操作。
在点击确认按钮后,再向父级组件传递事件。
当一个组件样式可以共用时,最好把样式和数据分开,尽量不在这个组件里调数据
比如:一个可以共用的样式,两个地方用,展示的数据不一样。点击后请求的接口不一样。
用props传参,或者通过open方法传参
点击事件传递出去,在父组件中请求接口。
**ref很好用**
通过给子组件定义的ref来调取子组件中的方法
比如dialog弹窗组件,通过ref来调用开关方法,控制弹窗显示关闭
父子组件传值
子传父 $emit
父传子 props ref
爷孙 provide reject
**好习惯
svn提交代码的时候,填写清晰的备注,比如【模块】+修改说明 ,如改bug +bug编号,这样便于后期查询修改原因。
代码注释:一些复杂业务逻辑地方,最好加一句注释,说明情况。注释业务逻辑,方便其他人理解
能从路由调取的就不要在页面里写死,比如页面的name,path,meta等
减少垃圾代码:自己写的并注释的代码,在测试通过后,就删掉。别留下一堆注释的垃圾代码。注:别人写的代码。不要随便修改或删除。