在子组件修改父组件ref对象嵌套属性是否违反Prop修改反模式？

这属于Prop修改反模式，核心原因如下：

• 违反单向数据流原则
  Vue的Prop设计遵循单向数据流：父组件向子组件传递数据，子组件仅能读取，不能直接修改。哪怕你修改的是对象的嵌套属性（而非直接替换整个Prop的引用），本质上还是在子组件中篡改了父组件的状态。这种操作会让数据流变得不可追踪——父组件无法感知自己的状态被子组件修改，调试时很难定位变更来源。

• 降低代码可维护性
  如果多个子组件都修改同一个父组件对象的属性，状态变更会变得混乱无序，后续维护时很难追溯哪段代码触发了状态变化，增加排查成本。

正确的实现方式 #

应该通过自定义事件让子组件通知父组件，由父组件负责修改状态：

父组件代码

<template>
  <parent-picker :person="person" @update-parent="updateParentInfo" />
</template>

<script setup>
import { ref } from 'vue'
const person = ref({ name: 'John Doe', parent: { name: 'Jane Doe' } })

const updateParentInfo = (newParentData) => {
  person.value.parent = newParentData
}
</script>

子组件代码

<template>
  <input v-model="localParentName" />
  <button @click="triggerUpdate">更新父信息</button>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['person'])
const emit = defineEmits(['update-parent'])

// 在子组件中维护局部临时状态，避免直接修改Prop
const localParentName = ref(props.person.parent.name)

const triggerUpdate = () => {
  emit('update-parent', { name: localParentName.value })
}
</script>

这样既遵守了Vue的单向数据流规则，又能清晰追踪状态变更的来源，提升代码的可维护性。

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