开发组件库时,遇到了一个坑,先看代码
methods:{
handleClick(){
this.$emit('input',!this.value)
this.setColor()
},
我在点击switch组件时,拿到value是true还是false,通过对value的值来给switch开关颜色,比如我给switch false时是红色,true时为绿色。但是出现了一个问题,就是第一次点击时,颜色都是红色,当第二轮点击时才切换颜色,并且正好与我设置的颜色相反 false为绿色,true为红色了。
这是因为当我们点击的时候会让value发生改变,但是我们还没有接收到value值就调用setColor方法了,所以我们需要处理异步,先拿到value的值再调用getColor方法
解决方法一
handleClick(){
this.$emit('input',!this.value)
setTimeout(()=>{
this.setColor()
})
},
解决方法二
async handleClick(){
this.$emit('input',!this.value)
await this.$nextTick()
this.setColor()
},