Version

3.2.16

Steps to reproduce

父组件:

<script setup>
let labelObj = reactive({labelData:[ ]})
function choose(type){
  if(type === 'bad'){
    labelObj.labelData = [{label:'差评',id:'dsad',choosed:false},{label:'特差评',id:'dsaad',choosed:false}]
  }else{
    labelObj.labelData = [{label:'好评',id:'s',choosed:false},{label:'特好评',id:'dsss',choosed:false}]
  }
}
</script>
<template>
     <div class="textBox" @click="choose('bad')">
         切换
     </div>
     <div class="textBox" @click="choose('fine')">
        再切换
     </div>
     <div class="labelContent" v-if="isActive">
         <multiple-label @select="select" :labelList='labelObj.labelData'></multiple-label>
     </div>
</template>

=============>
子组件
<script setup>
const props = defineProps({
  labelList:{
    type:Array,
    required:true,
    default:[]
  }
})
const emit = defineEmits(['select'])
let labelArr = reactive({labelList:props.labelList}),choosedLabel = reactive({choosedList:[]})
function choose(label){
  labelArr.labelList.forEach(item => {
    if(item.id === label.id){
      item.choosed = !item.choosed
    }
  })
  choosedLabel.choosedList = labelArr.labelList.filter(item => item.choosed)
  emit('select',choosedLabel.choosedList)
}

</script>
<template>
  <div class="labelBox">
    <div :class="['label',{'activeLabel':labelItem.choosed}]"
      @click="choose(labelItem)" 
      v-for="labelItem in labelArr.labelList" :key="labelItem.id"
    >
      {{labelItem.label}}
    </div>
  </div>
</template>

What is expected?

子组件接受到数据可直接使用并修改吗?

What is actually happening?

子组件直接使用props.labelList是没有问题的,若是使用reactive包装props属性,父组件修改数据,子组件接收到的数据不会改变