vue使用中的 填坑记录
.sync
和 update
我们经常使用 prop 和 emit 的组合来实现父子之间的通信,如果简单的场景下想父子组件相互修改,可以使用.sync 和 update组合。
//子组件
methods:{
changeSyncData(){
this.$emit("update:FnName",{name:123})
}
},
//父组件
<sync-vue :FnName.sync="analysisData" />
:sync只是给大家伙提供了一种与父组件沟通的思路而已!所以在后面日子里,你如果只是单纯的在子组件当中修改父组件的某个数据时,建议使用sync,简单,快捷,有档次!真好!
在组件中使用witch的坑
1.vue 中 父组件对子组件设置v-if 属性应注意
v-if 会影响 子组件的生命周期 导致watch 不起作用
把 v-if 换成 v-show 可解决了。
2. deep属性(深度监听,常用语对象下面属性的改变) 这样的方法对性能影响很大 改进
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
deep: true
}
}
props: {
examPlan: Object
},
watch: {
'examPlan.id': {
handler(newName, oldName) {
console.log("watch 触发了")
this.getExamPlanList();
},
// immediate: true,
// deep: true
// deep性能影响很大,修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理 'examPlan.id'只监听对象下某个属性
}
},
.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model
添加 trim
修饰符:
<input v-model.trim="msg">
后台时间太久,对前端用户非常不友好。
全局设置超时时间(单位ms)
axios.defaults.timeout = 2500; //2.5s
单独设置超时时间(单位ms) 对于请求上传文件之类的耗时比较长的接口可以单独设置超时时间
axios.get('/longRequest', {
timeout: 5000
});
这类后台无法立即处理的请求,可以用定时查询或者websocket,总的分为2步。1、前端发起请求,后台响应,前端界面需要有提交成功正在处理的提示。2、后台处理完毕,向前端发送消息,前端界面显示操作完成的提示。