Vue3 Composition API 中道具的反应性？

Question

我正在观看子组件上的几个道具（basicSalaryMin 和 basicSalaryMax）。当值发生变化时，我然后尝试更新父组件上的反应值（data.companyModels，它也作为 [=21 内的道具传递给子组件=]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 之间变化）并根据需要创建尽可能多的等距工资值以匹配等级号。有什么想法吗？

Answer 1

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

yourref.value.

所以在你的情况下 allReactiveData.value

See docs

Vue3 Composition API 中道具的反应性？

Reactivity in props in Vue3 Composition API?

javascript

vue.js

object

vuejs3

vue-props