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

Question

我有两个 Vue 组件，EventTask和EventCard. EventTask有一个currentEvent对象data，我将其作为道具传递给EventCard喜欢

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

在 EventCard 中，我从道具初始化event数据属性，如this answer中所建议currentEvent

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

但是，由于某种原因，event未正确设置 data 属性。这是我在 Vue 开发者工具中看到的

请注意，currentEventprop 是一个带有一堆属性的对象，但eventdata 属性是一个空对象。为什么没有从道具正确初始化数据属性？

标签： javascriptvue.js

Answer 1

如果在已经初始化之后currentEvent更新，则可能会发生这种情况。请注意，不会被动调用，因此更改不会重新初始化。 EventCarddata()currentEventevent

一种解决方案是使用观察者将currentEvent其复制到event：

export default {
  watch: {
    currentEvent(newValue) {
      this.event = { ...newValue }
    }
  }
}

演示