javascript - Vue.js - 如何在子组件中渲染数据更改？

Question

所以我有一个父组件Store，它有一个名为Order的子组件。来自父级的数据通过 props 传递给其子级，如下所示:

父级

<Order :order="order" />

child

props: ['order']

我需要在子组件中使用一个名为 orderIds 的新数据变量，因此我声明:

child

props: ['order'],
data: () {
  return {
    orderIds: Object.keys(this.order)
  }
}

然后，我在 View 中渲染 orderIds:

{{orderIds}}

现在，每当 父级 中的 order 数据发生更改时，它都会更新子级中的 prop order，但不会通过到 orderIds。

当 order 发生变化时，我如何更新 orderIds？

Answer 1

使用计算属性代替数据。

computed: {
    orderIds: function () {
      return Object.keys(this.order);
    }
  }