Vue.js 如何在Vue JS中将数据属性初始化为prop对象属性

我正在尝试从组件中的prop对象初始化数据对象

我调用组件的视图有如下内容

<template>
  <Comp1 :item="itmObj" />
</template>
<script>
  export default {
    name: "myView",
    data: function() {
      return {
        itmObj: {color: "red", size: "Medium", quantity: "10"}
      }
    }
  }
<script>

导出默认值{
名称：“myView”，
数据：函数（）{
返回{
itmObj:{颜色：“红色”，大小：“中等”，数量：“10”}
}
}
}

组件Comp1.vue具有以下特性

<template>
  <div>
    <div>Initial Quantity  {{item.quantity}}</div>
    <div>Available Quantity  {{availableQuantity}}</div>
  </div>
</template>
<script>
  export default {
    name: "comp1",
    props: ["item"]
    data: function() {
      return {
        availableQuantity: this.item.quantity
      }
    }
  }
<script>

初始数量{item.Quantity}
可用数量{AvailableEquantity}
导出默认值{
名称：“comp1”，
道具：[“物品”]
数据：函数（）{
返回{
可用相等：this.item.quantity
}
}
}

---

我得到了一个空的availableQuantity。

我使用了beforeCreate钩子来设置availableQuantity。调整后的代码如下所示：

<template>
  <div>
    <div>Initial Quantity  {{item.quantity}}</div>
    <div>Available Quantity  {{availableQuantity}}</div>
  </div>
</template>
<script>
  export default {
    name: "comp1",
    props: ["item"]
    data: function() {
      return {
        availableQuantity: 0
      }
    },
    beforeCreate() {
      this.availableQuantity = this.item.quantity;
    }
  }
<script>

初始数量{item.Quantity}
可用数量{AvailableEquantity}
导出默认值{
名称：“comp1”，
道具：[“物品”]
数据：函数（）{
返回{
可用性：0
}
},
beforeCreate（）{
this.availablequality=this.item.quantity；
}
}

此代码对我有效。您是否检查了控制台并看到任何错误？是否自动导入组件？如果没有，您应该将

Comp1

组件导入父组件。。。否则，您的代码适用于meThe控制台错误表示数据是非反应性的。我尝试将AvailableEquality设置为空白，并使用不同的生命周期挂钩。有效性仍然没有显示出来。但是，如果我做一些代码更改并保存（强制刷新NPM服务器），则可用性appears@AhmetZeybek是，该组件是使用导入Comp1从“@/components/Comp1.vue”导入的；你能发布这两个组件的完整代码吗？