从Vue组件中的对象道具初始化数据

Question

我有两个Vue组件，EventTask和EventCard。 EventTask在currentEvent中有一个data对象，我将其作为道具传递给EventCard，就像这样

<event-card :current-event="currentEvent" />

在EventCard中，我根据this answer的建议从event道具初始化了currentEvent数据属性。

export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: { ...this.currentEvent }
    }
  }
}

但是，由于某些原因，event数据属性未正确设置。这就是我在Vue开发人员工具中看到的内容

请注意，currentEvent属性是一个对象，具有一系列属性，但是event数据属性是一个空对象。为什么无法从prop中正确初始化数据属性？

Answer 1

如果currentEvent在初始化后{em> {em> 之后更新，则可能发生这种情况。请注意，EventCard不会被被动调用，因此对data()的更改不会重新初始化currentEvent。

一种解决方案是在event上使用watcher将其复制到currentEvent：

event

demo

Answer 2

您可以尝试以下代码

export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: null
    }
  },
  mounted () {
    this.event = this.currentEvent // you can also try clone here.
  }
}

Answer 3

尝试这样操作：

export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: this.currentEvent
    }
  }
}

来源：https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow