vue项目实践常用代码

一、父子通信语法糖

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,()=>{
...
}