Javascript 从Vue组件中的对象属性初始化数据

我有两个Vue组件，

EventTask

和

EventCard

EventTask

在

data

中有一个

currentEvent

对象，我将其作为道具传递给

EventCard

如下

在EventCard中，我根据中的建议，从

currentEvent

属性初始化

event

数据属性

但是，由于某些原因，

事件

数据属性未正确设置。以下是我在Vue开发人员工具中看到的内容

---

请注意，

currentEvent

prop是一个具有一组属性的对象，但是

event

data属性是一个空对象。为什么无法从道具正确初始化数据属性？

您可以尝试以下代码

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.
  }
}

---

试着这样做：

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

---

来源：

如果在

EventCard

已初始化后更新

currentEvent

，则可能发生这种情况。请注意，

data（）

不是被动调用的，因此对

currentEvent

的更改不会重新初始化

event

一种解决方案是使用on

currentEvent

将其复制到

事件中：

导出默认值{
观察：{
currentEvent（新值）{
this.event={…newValue}
}
}
}

您能否共享一个简单的演示/小提琴来表示您的场景，因为它在正常情况下工作。为什么您需要在数据中创建另一个属性？您可以在EventCard组件中使用相同的currentEvent（this.currentEvent）。在数据中创建另一个属性的任何特定原因？。另一种方法是在一个生命周期中将currentEvent分配给event（数据中），您可以使用mounted（）{this.event=this.currentEvent}@SowmyadharGourishetty我需要在数据中创建另一个属性，因为我将在
EventCard
组件中修改此对象，但我不希望这些更改传播到
EventTask
componentAFAIK，建议您在道具是对象或数组（通过引用传递）时不要这样做，因为子对象中的更改也会反映在父对象中。来源：好的！感谢您提供的信息我认为
currentEvent
在
EventCard
初始化后更新正是问题所在。我没有意识到
data（）
只被调用一次，而不是被动地调用。
export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: this.currentEvent
    }
  }
}