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

【问题标题】：Initialising data from an object prop in a Vue component从 Vue 组件中的对象道具初始化数据
【发布时间】：2020-11-20 14:00:06
【问题描述】：

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

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

在 EventCard 中，我从 currentEvent 属性初始化了一个 event 数据属性，正如 this answer 中所建议的那样

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

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

请注意，currentEvent 属性是一个带有一堆属性的对象，但event 数据属性是一个空对象。为什么没有从 prop 正确初始化 data 属性？

【问题讨论】：

您能否分享一个代表您的场景的简单演示/小提琴，因为它在正常情况下有效。
为什么需要在数据中创建另一个属性？您可以在 EventCard 组件中使用相同的 currentEvent (this.currentEvent)。在数据中创建另一个属性的任何具体原因？另一种方法是将currentEvent分配给一个生命周期中的事件（在数据中），您可以使用mounted() {this.event = this.currentEvent }
@SowmyadharGourishetty 我需要在数据中创建另一个属性，因为我将在EventCard 组件中修改此对象，但我不希望这些更改传播到EventTask 组件跨度>

标签： javascript vue.js

【解决方案1】：

如果currentEvent 更新 EventCard 已经初始化，则会发生这种情况。请注意，data() 不会被动调用，因此对currentEvent 的更改不会重新初始化event。

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

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

demo

【讨论】：

我认为currentEvent 在EventCard 初始化后更新正是问题所在。我没有意识到 data() 只被调用一次，而不是被动调用。

【解决方案2】：

尝试这样做：

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

【讨论】：

AFAIK，建议您在 prop 是对象或数组（通过引用传递）时不要这样做，因为子项的更改也会反映在父母身上。来源stackoverflow.com/a/40435856/2648
好的！感谢您的信息

【解决方案3】：

你可以试试下面的代码

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

【讨论】：