Vue3 Composition API 中道具的反应性？

Posted 2023-02-22

【中文标题】Vue3 Composition API 中道具的反应性？

【英文标题】：Reactivity in props in Vue3 Composition API?

【发布时间】：2021-06-08 23:10:17

【问题描述】：

我正在观看子组件（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,
    
  )

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

【参考方案1】：

如果您想从您的脚本中访问或修改ref，您需要这样做

yourref.value.

所以在你的情况下allReactiveData.value

See docs