从 VueJS 中的子组件获取父计算函数的值

Question

我正在尝试将更改的计算方法的值传递给我的子组件，但收效甚微。我正在制作一个按钮组件，它有几种不同的保存状态 - 但我的按钮总是卡在一个上，并且不会与父级一起更新。

当我不尝试将此按钮用作组件并将其直接放入父级时，我的计算方法工作正常，所以问题是我如何传递数据。

父母

  computed: {
    isSaving() {
      return (
  this.$_.values(this.$store.getters["CommonSettings/saving"]).filter(
          status => status && status != "done"
        ).length > 0
      );
    }


 <SaveButton v-bind:saveState="isSaving"/>

孩子

<script>    
export default {
  name: "saveButton",
  props: ['saveState']
}
</script>
<template>
  <div class="settings--button-wrapper">
    <button v-if="!saveState">
      Save
    </button>
    <button v-if="saveState">
      Saving..
    </button>
  </div>
</template>

我是否在做任何明显错误的事情？

Answer 1

您应该使用 saveState 而不是 isSaving。

Answer 2

父母

computed: {
    isSaving() {
      // add `this.`
      return (
          this.status && this.status != "done"
        )
      );
    }
}

<SaveButton v-bind:saveState="isSaving"/>

孩子

<script>    
export default {
  name: "saveButton",
  props: ['saveState']
}
</script>
<template>
  <div class="settings--button-wrapper">
    <!-- use `saveState` -->
    <button>
      {{ saveState ? 'Saving..' : 'Save' }}
    </button>
  </div>
</template>