在前端开发的时候为了方便常会用到组件,这个时候就涉及到传值,并且用input时使用v-model绑定的值需要是本地的备份参数,这就容易引发一个问题,就是当外部值变换后,本地不能及时重新赋值。
这里有篇文章对vue-property-decorator的使用写的非常详细:
https://juejin.cn/post/6844903741456384014
而监控数值变换最顺手的是Watch监控,值得注意是,当我们引用时需要辨别是否import来源正确,因为有很多Watch,所以自动引入容易出现混乱且很难注意到重点是报错不会告诉你(巨坑)需要一个版本一个版本回退才能发现。
正确的import:
import {Vue, Component, Emit, Prop, Watch} from 'vue-property-decorator';
部分代码:
<input v-model="temp_label" :placeholder="placeholder.type" />
@Prop({default: ''}) label!:string;
private temp_label = this.label;
@Watch('label', { immediate: true })
onLabelChanged(val: string, oldVal: string) {
this.temp_label = val;
}
关于Watch的高级用法可以参考这篇文章:
https://segmentfault.com/a/1190000038222430
0 个评论
要回复文章请先登录或注册