Vue.js - 如何在子组件中呈现数据更改？

Question

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

父

<Order :order="order" />

儿童

props: ['order']

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

儿童

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

然后，我在视图中渲染orderIds：

{{orderIds}}

现在，只要父级中的order数据发生更改，它就会更新子级中的道具order，但不会传播到orderIds

如果orderIds中的内容发生变化，我将如何更新order？

Answer 1

而不是数据使用计算属性。

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