Vue3 Composition API 中道具的反应性？

如何解决Vue3 Composition 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,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,2: '4000',3:'5000' }},{ id: 'Small',workers: 10,ranks: 2,2: '5000' }},{ id: 'Individual',workers: 1,ranks: 1,wages: {1: '3000'}}}
          ],)}
    let reactiveData = toRefs(data)
    return {
            allReactiveData,}
  )}

目标是然后检查等级的值（将在 1 到 100 之间变化）并根据需要创建尽可能多的等距工资值以匹配等级编号。有什么想法吗？

解决方法

如果您想从脚本中访问或修改 ref，您需要执行

yourref.value。

所以在你的情况下 allReactiveData.value

See docs