一、父子通信语法糖
1、子组件传值(布尔值)
使用场景:当子组件向父组件传值时,传递布尔值,就没必要定义事件复杂代码了
使用方法:
子组件a:
this.$emit('input',false)
父组件b:
<a v-model="isShow"></a>
这样当子组件触发this.$emit('input',false)
时,isShow就为false
当然this.$emit('input',false)
这里的false可以写其他值代表你想传的布尔值。
2、父子间双向绑定
使用场景:子组件的数据变化影响父组件,父组件也影响子组件
使用方法:
子组件a:通过update传递aaa数据给父组件
this.$emit('update:aaa',this.aaa)
父组件b:通过.sync接收aaa的数据给bbb,同时bbb变化了也会改变aaa并传值给子组件
<a :aaa.sync="bbb"></a>
3、子组件传值(数据)
使用场景:当子组件向父组件传递数据
使用方法:
子组件a:通过事件传值
this.$emit('getData',this.aaa)
父组件b:通过$event直接获取数据
<a @getData="bArr=$event"></a>
4、父组件去触发子组件内部函数
this.$ref['子组件的ref'].fn(可传参)
二、css样式
路由级页面使用module,公共组件使用scoped
- scoped作用是阻止上层的css样式传递到下层,限制当前css作用域,使其只对当前组件生效
- module可以解决覆盖问题,不同之处是它在布局中的引用,都需要添加前缀$style。通过module作用的style都被保存到 $style对象中。可以很灵活的将任意父组件样式传递到任意深层的子组件中
<div :class="$style.文件名">
<div class="btn"></div>
</div>
<style lang="scss" module>
:global{
.btn{
margin-right:10px;
}
</style>
三、watch的使用
watch:{
value:{
handle(v):{
console.log(v)
},
immediate:true, //在监听开始之后立刻被调用
deep:true //用于监听的对象的层级嵌套很深
}
}
四、枚举的使用
在lib文件夹创建一个enums.js的文件,存储常用数据
export const incidentNumClass = [
{ label:'总数',tip:'这里是tip1信息',type:'total'},
{ label:'平均',tip:'这里是tip2信息',type:'avg'},
{ label:'访客数',tip:'这里是tip3信息',type:'visitor'},
]
在需要的文件设置,这样可以通过type获取label的值
import {incidentNumClass} from '@/lib/enums'
const incidentNumMap = incidentNumClass.reduce((map,item)=>{
map[item.type] = item.label
return map
})
-----------------
incidentNumMap['total']//总数
五、template两种class写法
- 单个class
<div :class="visible?'isShow':''"></div>
- 多个class,有对象和数组两种写法
<div :class="{'inputColor':changArr.length===0,'borderColor':isShow}"></div> //对象写法
<div :class="[{inputColor:changArr.length===0},{borderColor:isShow}]"></div> //数组写法
大于2个,推荐用computed计算属性
六、常用的lodash
- 深拷贝
_.cloneDeep(data)
- 排序
_.sortBy(data,'id') //数组data根据id进行从小到大的排序
- 获取唯一的ID
const obj = {uid:_.uniqueId(),name:'' } //用于多次生成对象
- 数组合并
_.concat(arr1,arr2) //合并数组arr1和arr2
- 防抖
getData:_.debounce(()=>{},100)
//创建一个debounce防抖动的函数,该函数会从上一次被调用后,延迟wait毫秒后调用func方法
- 判断两个值是否相等
_.isEqual(arr1,arr2) //得到一个布尔值
七、jsx写法
实现el-table自定义表头
renderHeader:this.tipRender('tip名','这是一个tip信息')
-------------------
tipRender(name,content){
retrun h=> <div class="tip-btn">
<span>{name}</span>
<el-tooltip>
<div slot="content">{content}</div>
<i class="el-icon-question"></i>
</el-tooltip>
</div>
}
八、表单校验
Form组件提供了表单验证的功能只需要通过rules属性传入约定的验证规则,并将Form-item 的prop属性设置为需校验的字段名即可,所以重点就是prop了。
- 普通表单校验
<el-form-item>
<el-input v-model="ruleForm.age"> </el-input>
</el-form-item>
------------------------------------------
rules:{
age:[
{ validator:this.checkAge , trigger:'bulr}
]
}
-------------------------------------------
checkAge(){
if(!value){
retrun callback(new Error('不能为空'))
}else{
if(!Number.isInteger(value)){
callback(new Error('请输入数字'))
}else{
callback()
}
}
}
- 动态表单校验
主要是v-for循环,动态变化prop
<el-form-item
v-for="(item,index) in ruleDorm.domains"
:key="item.id"
:prop="`domains[${index}]`"
:rules="{required:true, trigger:'blur',validator:validPc}">
</el-form-item>
---------------------------------------
//该校验是判断链接是否输入,是否为正确的链接
validPc(rule,value,callback){
if(!value.domainName){
callback(new Error('请填写地址'))
}else{
const match = /^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[/]?.*$/
if(match.test(value.domainName)){
callback()
}else{
callback(new Error("链接无法访问,请重新输入"))
}
}
九、其他
1、减少if的嵌套
可以在相反的条件,return跳出函数
if(!this.disable){ if(this.disable) return
if(){} if(){}
if(){} => if(){}
if(){} if(){}
}
2、this.$nextTick()的使用
作用:将回调延迟到下次DOM更新循环之后执行
this.$nextTick(()=>{
.....
})
3、利用callback实现异步后的数据处理,可以得到数据后再做处理
getData(num,callback){
this.$api.get('...').then(res=>{this.aaa = res.data})
}
this.getData(2,()=>{
...
}