typescript开发vue,经常遇到prop不刷新的问题。
这个问题原因是这样的。
在typescript的vue中定义的prop需要用@Prop注释。
用过@Prop定义的那个属性,如果在组件中适用,即便是console.log输出,都会遇到一个警告,说这个变量是从外部设置的,建议不要直接使用。因为他可能随时 改变。
这个警告在console控制台不断的刷,非常烦人。
于是就有了如下写法:
/**
* 输入值.
*/
@Prop({
required: false,
default: '',
})
protected value!: string;
protected propValue: string = this.value;
然后在所有的地方用propValue这个属性。
接下来问题来了,在引用组件的父页面中,对象中的属性更新,无法触发这个组件的赋值。比如:
<x v-model="name"/>
这样没有问题,但是
<x v-model="target.name"/>
这样在target中的name属性更新之后,组件是不会发生变化的。
如果用js还好,毕竟用js不会计较太多OO的问题。但是既然用了TypeScript,必然很多数据都封装成了对象,总不能把所有属性copy到组件上吧。
经过各种尝试, s e t 不 好 用 , set不好用, set不好用,forceupdate时而好用,时而不好用,$nextTick也是看心情。
最后发现,其实是需要@Watch的。
/**
* 输入值.
*/
@Prop({
required: false,
default: '',
})
protected value!: string;
protected propValue: string = this.value;
@Watch("value", {immediate: true})
public watchValue() {
this.propValue = this.value;
}
通过监视value的变化,改变引用成员变量的值。
这样就好了。
但总是如鲠在喉。掉了多少头发啊,都提示不推荐用了,就不知道一起说一下推荐用法么!
THE END