--setInterval
发送短信倒计时正确代码:
this.getSmsContentFlag=false
let count=120
var timer=window.setInterval(() =>{
count--
if(count>0){
this.getSmsContent="剩余时间"+count+"s"
}else{
this.getSmsContent="重新获取验证码"
this.getSmsContentFlag=true
window.clearInterval(timer);
}
},1000)
总结:
1、window.setInterval(function(){},1000) 获取不到vue 中的 data 的值
2、count、timer的值只能在setInterval前面设置,不能 设置在data中,用this引用不到对应的数据;无法用 window.clearInterva关闭对应的倒计时的数据
3、window.setInterval(this.getSms(),1000) 只能执行一次,因为()是立即执行块,可以写成:window.setInterval(function(){this.getSms()},1000);(注:没有测试过这种写法)
4、其他问题:mounted、
5、为了要停止计时 我们需要把 setInterval 赋值给一个变量 为了之后用 clearInterval()停止计时; 这个变量 不能用 vue 中的 data 来管理,如果使用在之后调用停止的时候无法停止,解决方法:beforeCreate : function(){ window.intervalObj="";},
6、箭头函数中的this指向是固定不变的,即是在定义函数时的指向; 而普通函数中的this指向时变化的,即是在使用函数时的指向。
$attrs、$listeners
组件通讯:
v-bind:test="parentTest" ; props:["test"]
inheritAttrs //此处设置禁用继承特性 (只继承class属性)
@childEvent="parentEvent" ;this.$emit("childEvent")
$listeners $attrs 再套层的组件中使用