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

Posted 2023-02-22

【中文标题】从 Vue 组件中的对象道具初始化数据

【英文标题】：Initialising data from an object prop in a Vue component

【发布时间】：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 组件跨度>

【参考方案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 是对象或数组（通过引用传递）时不要这样做，因为子项的更改也会反映在父母身上。来源***.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.