1

TypeScript と .js で 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);
    }
  }
}

本当に 2 つのフィールドisLoaded_isLoaded使用this.$emitし、さらに の魔法の文字列を使用する必要がありupdate:isLoadedますか? この構文はすべて非常に冗長に見えますが、もっと簡単な方法はありますか? これをカプセル化する方法はありますか?

4

1 に答える 1