要和守约赴约
要和守约赴约
  • 发布:2022-05-24 14:15
  • 更新:2022-05-24 14:15
  • 阅读:1466

vue-property-decorator 中 Watch 的使用,监控数据组件变化

分类:uni-app

在前端开发的时候为了方便常会用到组件,这个时候就涉及到传值,并且用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 关注 分享

要回复文章请先登录注册