1

我将 Vue.js 与 TypeScript 和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吗？所有这些语法似乎都很冗长，有没有更简单的方法？有什么方法可以封装其中的一些吗？

4

1 回答 1

0

在您的应用程序中，价值在什么时候发生了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>
于 2017-11-17T11:10:36.253 回答