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

Question

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

父组件

<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

在您的应用中， journal.template.velocity.restricted.variables= 的价值何时发生变化？如果它只在父级中更改，则不需要发出备份事件，并且您可以在没有isLoaded且没有@Watch变量的情况下使用支柱。 如果子项中的isLoaded发生更改，则不需要prop和duplicate变量。您可以发出_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
  }
}