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

【问题标题】：Vue.js - How to render data changes in child component?Vue.js - 如何在子组件中呈现数据更改？
【发布时间】：2017-09-01 12:33:42
【问题描述】：

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

父母

<Order :order="order" />

孩子

props: ['order']

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

孩子

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

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

{{orderIds}}

现在，每当 parent 中的 order 数据发生变化时，它都会更新子中的 prop order，但不会传播到 orderIds。

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

【问题讨论】：

【解决方案1】：

使用计算属性代替数据。

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

【讨论】：

但是这样我们不能更新子组件中的orderIds。我们通常使用 props 来初始化数据并在之后更改数据。
您可以发出一个事件来更新父组件上的订单，从而更新子组件上的orderId，或者您可以使用计算设置器，或者您可以使用order 和初始化数据使用基于此的计算属性。我添加的答案适合所提出的问题。