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
ますか? この構文はすべて非常に冗長に見えますが、もっと簡単な方法はありますか? これをカプセル化する方法はありますか?