使用 vue-property-decorator 的 Vue.js 双向同步数据绑定

Question

我正在使用带有 TypeScript 和 vue-property-decorator 的 Vue.js。我想在父组件和子组件之间执行一些双向数据绑定。这是我想要做的一个简单的想法：

父组件

<template>
  <progress :is-loaded.sync="isLoaded"/>
</template>

@Component
export default class ParentComponent extends Vue {
  get isLoaded() { return Store.getters["isLoaded"]; }
  set isLoaded(value: boolean) { Store.commit("isLoaded", value); }
}

子组件

<template>
 <progress :value="_value" min="0" max="100"></progress>
 {{_isLoaded}}
</template>

@Component
export default class ChildComponent extends Vue {
  @Prop()
  public isLoaded: boolean;

  public _isLoaded: boolean;
  public _value: number;

  public mounted() {
    this._isLoaded = this.isLoaded;
    this._value = this.value;
  }

  @Watch("isLoaded")
  public onIsLoadedChanged() {
    if (!isLoaded) {
      // Animate _value from 0 to 100.
      this._isLoaded = true;
      this.$emit("update:isLoaded", this._isLoaded);
    }
  }
}

我真的必须使用两个字段isLoaded 和_isLoaded 以及使用this.$emit 和update:isLoaded 的魔术字符串吗？所有这些语法似乎都很冗长，有没有更简单的方法？有什么方法可以封装其中的一些吗？

Answer 1

isLoaded 的值在您的应用程序中的哪一点发生变化？如果它仅在父级中发生更改，则不需要发出备份事件，并且可以只使用不带 @Watch 和不带 _isLoaded 变量的道具。 如果 isLoaded 在孩子中发生变化，则不需要道具和重复变量。您可以只发出一个loaded 事件并在父级中侦听该事件。

这是一个简化的例子，当父级更改时子级的样式会发生变化isLoaded

父母

<template>
  <progress :is-loaded="isLoaded"/>
</template>

@Component
export default class ParentComponent extends Vue {
  public isLoaded: boolean = false
  created(){
    setInterval(()=>this.updateStatus(), 500)
  }
  this.updateStatus(){
    this.isLoaded = true
  }
}

孩子

<template>
 <div :class="{ full: isLoaded }">Loaded is {{ isLoaded }}</div>
</template>

@Component
export default class ChildComponent extends Vue {
  @Prop()
  isLoaded: boolean;
}

<css>
   .full {width:100%}
</css>