Vue3+Laravel9：子组件修改响应式变量遇target is readonly报错求助

问题根源 #

Vue的defineProps返回的props对象是只读的响应式对象，用于保证单向数据流原则。你直接将initProps传入reactive()，并没有创建新的独立响应式对象，而是直接代理了这个只读的props对象，所以子组件尝试修改时会触发target is readonly警告。

解决方案 #

需要将props的属性复制到新的普通对象中，再用reactive包裹，创建独立的响应式变量，脱离原props的只读限制：

父组件修改代码 #

<script setup>
import { reactive, watch } from 'vue';

const initProps = defineProps(['location', 'orientation']);

// 复制props属性到新对象，生成独立的响应式变量
const values = reactive({
  location: initProps.location,
  orientation: initProps.orientation
});

// 可选：若需要原props更新时同步values，添加监听
watch(initProps, (newProps) => {
  values.location = newProps.location;
  values.orientation = newProps.orientation;
}, { deep: true });
</script>

子组件修改说明 #

子组件接收formValues后，直接修改属性即可（如props.formValues.location = 'new-location'），此时操作的是父组件创建的独立响应式对象，不再受原props的只读限制。

为什么之前的写法无效 #

• 无论将initProps或values声明为const还是var，都无法改变props对象本身是只读的事实
• reactive(initProps)只是代理了原props对象，没有生成新的可写响应式对象

内容的提问来源于stack exchange，提问作者Skyfrid