Javascript Vue3合成API中道具的反应性？

我正在观看一个儿童组件（basicSalaryMin和basicSalaryMax）上的几个道具。当值更改时，我将尝试更新父组件（data.companyModels）上的值，该值也将作为allReactiveData中的道具传递给子组件

子组件：

<template>
   <div>
  {{allReactiveData.companyModels}} // all data is rendered!
   </div>
</template>

<script>
  import { toRefs, watch, ref, reactive } from "vue";
  export default {
  name: 'SimPrivate',
  props: {
        reactiveData: {
            required: true,
            type: Object
        },
  },
  setup (props, { emit }) {
      const allReactiveData =  ref(props.reactiveData);
     const basicsalaryMin = ref(props.reactiveData.basicsalaryMin);
     const basicsalaryMax = ref(props.reactiveData.basicsalaryMax);
     const changeCompanyProfit = ref(props.changeCompanyProfit)

      watch([basicsalaryMin, basicsalaryMax], ([newBSMin, newBSMax], [prevBSMin, prevBSMax]) => 
      {
            let wagesArray =[]
            wagesArray.push(newBSMin, newBSMax);
            adjustAllWorkersSalaries(wagesArray);
            allReactiveData.companyModels.forEach(function(company) 
//console is saying Uncaught (in promise) TypeError: 
Cannot read property 'forEach' of undefined!! 
and Can't do anything to the object from this point forward 
I then need to add new sub-properties depending on 
how many __ranks__ the property companyModel has...  
but I'll get to that later

                {
                
                for (const [key, value] of Object.entries(company)) {
                if (key === 'ranks') { 
// if 1 rank add sub-object to companyModel.wages with var basicsalaryMin value called "wages: {1: basicsalaryMin}"
// if 2 ranks add sub-object: "wages:{1: basicsalaryMin, 2: basicsalaryMax }
// if 3 ranks add sub object: "wages...
// as in the model bellow but allowing for more levels


                   }
               }
            })

        })
     return {
            allReactiveData,
            basicsalaryMin,
            basicsalaryMax,
 
     }
   }'

<template>
  <div>
         <input @change="handleMaxSalaries(basicsalaryMax)" id="maxsalaryInput" v-model.number='basicsalaryMax'>
        <SimPrivate :reactiveData='reactiveData' @adjustAllWorkersSalaries='adjustAllWorkersSalaries'/>

  </div>
</template>
<script>
</script>
import { toRefs, watch, ref, reactive } from "vue";
import SimPrivate from '../views/SimPrivate.vue'

export default {
  name: "Simulator",
  components: {
      Slider,
      SimPrivate
    },
  props: {},
  setup( props, {emit}) {
    let data = reactive({
      avrgProfit: 0,
      basicsalaryMin: 3000,
      basicsalaryMax: 5000,
      TotalUBICreatedPerMonth: 0,
      companyModels: [
            { id: 'Big', workers: 250, ranks: 5, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000', 2: '3500', 3:'4000', 4: '4500', 5: '5000'  }},
            { id: 'Medium', workers: 75, ranks: 3, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000', 2: '4000', 3:'5000' }},
            { id: 'Small', workers: 10, ranks: 2, companyAvrgProfit: 0, totalWages: Number,  wages: {1: '3000', 2: '5000' }},
            { id: 'Individual', workers: 1, ranks: 1, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000'}}}
          ],
    )}
    let reactiveData = toRefs(data)
    return {
            allReactiveData,
            basicsalaryMin,
            basicsalaryMax,
    }
  )}

{{allReactiveData.companyModels}//所有数据都被呈现！
从“vue”导入{toRefs，watch，ref，reactive}；
导出默认值{
名称：“SimPrivate”，
道具：{
反应数据：{
要求：正确，
类型：对象
},
},
设置（道具，{emit}）{
常量allReactiveData=ref（props.reactiveData）；
const basicsalaryMin=ref（props.reactiveData.basicsalaryMin）；
const basicsalaryMax=ref（props.reactiveData.basicsalaryMax）；
const changeCompanyProfit=ref（props.changeCompanyProfit）
手表（[basicsalaryMin，basicsalaryMax]，（[newBSMin，newBSMax]，[prevBSMin，prevBSMax]）=>
{
让wagesArray=[]
推（newBSMin，newBSMax）；
调整所有工人工资（工资）；
allReactiveData.companyModels.forEach（函数（公司）
//控制台显示未捕获（承诺）类型错误：
无法读取未定义的属性“forEach”！！
从这一点开始就不能对物体做任何事情
然后，我需要根据需要添加新的子属性
物业公司模型有多少等级。。。
但我以后再谈
{
for（对象条目的常量[键，值]（公司））{
如果（键=='ranks'）{
//如果1个秩将子对象添加到companyModel.sweels，变量basicsalaryMin值为“工资：{1:basicsalaryMin}”
//如果2个列组添加子对象：“工资：{1:basicsalaryMin，2:basicsalaryMax}”
//如果3个等级添加子对象：“工资。。。
//与下面的模型一样，但允许更多级别
}
}
})
})
返回{
所有反应数据，
basicsalaryMin，
basicsalaryMax，
}
}'

父组件：

<template>
   <div>
  {{allReactiveData.companyModels}} // all data is rendered!
   </div>
</template>

<script>
  import { toRefs, watch, ref, reactive } from "vue";
  export default {
  name: 'SimPrivate',
  props: {
        reactiveData: {
            required: true,
            type: Object
        },
  },
  setup (props, { emit }) {
      const allReactiveData =  ref(props.reactiveData);
     const basicsalaryMin = ref(props.reactiveData.basicsalaryMin);
     const basicsalaryMax = ref(props.reactiveData.basicsalaryMax);
     const changeCompanyProfit = ref(props.changeCompanyProfit)

      watch([basicsalaryMin, basicsalaryMax], ([newBSMin, newBSMax], [prevBSMin, prevBSMax]) => 
      {
            let wagesArray =[]
            wagesArray.push(newBSMin, newBSMax);
            adjustAllWorkersSalaries(wagesArray);
            allReactiveData.companyModels.forEach(function(company) 
//console is saying Uncaught (in promise) TypeError: 
Cannot read property 'forEach' of undefined!! 
and Can't do anything to the object from this point forward 
I then need to add new sub-properties depending on 
how many __ranks__ the property companyModel has...  
but I'll get to that later

                {
                
                for (const [key, value] of Object.entries(company)) {
                if (key === 'ranks') { 
// if 1 rank add sub-object to companyModel.wages with var basicsalaryMin value called "wages: {1: basicsalaryMin}"
// if 2 ranks add sub-object: "wages:{1: basicsalaryMin, 2: basicsalaryMax }
// if 3 ranks add sub object: "wages...
// as in the model bellow but allowing for more levels


                   }
               }
            })

        })
     return {
            allReactiveData,
            basicsalaryMin,
            basicsalaryMax,
 
     }
   }'

<template>
  <div>
         <input @change="handleMaxSalaries(basicsalaryMax)" id="maxsalaryInput" v-model.number='basicsalaryMax'>
        <SimPrivate :reactiveData='reactiveData' @adjustAllWorkersSalaries='adjustAllWorkersSalaries'/>

  </div>
</template>
<script>
</script>
import { toRefs, watch, ref, reactive } from "vue";
import SimPrivate from '../views/SimPrivate.vue'

export default {
  name: "Simulator",
  components: {
      Slider,
      SimPrivate
    },
  props: {},
  setup( props, {emit}) {
    let data = reactive({
      avrgProfit: 0,
      basicsalaryMin: 3000,
      basicsalaryMax: 5000,
      TotalUBICreatedPerMonth: 0,
      companyModels: [
            { id: 'Big', workers: 250, ranks: 5, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000', 2: '3500', 3:'4000', 4: '4500', 5: '5000'  }},
            { id: 'Medium', workers: 75, ranks: 3, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000', 2: '4000', 3:'5000' }},
            { id: 'Small', workers: 10, ranks: 2, companyAvrgProfit: 0, totalWages: Number,  wages: {1: '3000', 2: '5000' }},
            { id: 'Individual', workers: 1, ranks: 1, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000'}}}
          ],
    )}
    let reactiveData = toRefs(data)
    return {
            allReactiveData,
            basicsalaryMin,
            basicsalaryMax,
    }
  )}

从“vue”导入{toRefs，watch，ref，reactive}；
从“../views/SimPrivate.vue”导入SimPrivate
导出默认值{
名称：“模拟器”，
组成部分：{
滑块，
SimPrivate
},
道具：{}，
设置（道具，{emit}）{
让数据=反应({
平均利润：0，
basicsalaryMin:3000，
basicsalaryMax:5000，
TotalUBICreatedPerMonth:0，
公司模型：[
{id:'Big'，工人：250，级别：5，公司股东：0，总工资：数字，工资：{1:'3000'，2:'3500'，3:'4000'，4:'4500'，5:'5000'}，
{id:'中等'，工人：75人，级别：3人，公司利润：0，总工资：数字，工资：{1:'3000'，2:'4000'，3:'5000'}，
{id:'Small'，工人：10名，级别：2名，公司股东利益：0，总工资：Number，工资：{1:'3000'，2:'5000'}，
{id:'个人'，工人：1，级别：1，公司AVRGPROFIT:0，总工资：数字，工资：{1:'3000'}}
],
)}
让reactiveData=toRefs（数据）
返回{
所有反应数据，
basicsalaryMin，
basicsalaryMax，
}
)}

目标是检查等级的值（在1到100之间变化），并根据需要创建尽可能多的等距工资值以匹配等级编号。

---

有什么想法吗？

如果您想访问或修改脚本中的

ref

，您需要这样做

yourref.value

所以在您的例子中，

allReactiveData.value