Vue3通过props传递reactive对象到子组件更新出现ESLint报错如何处理

警告触发原因 #

这个是eslint-plugin-vue的vue/no-mutating-props校验规则抛出的提示。Vue官方要求props遵循单向数据流规范，仅允许父组件更新props值向下传递给子组件，子组件直接修改props（包括reactive对象的深层属性）不符合该规范。虽然Vue3运行时不会拦截对象的深层修改，功能可正常运行，但不符合规范的写法会导致后续项目数据流追踪困难，问题排查成本升高。

正确处理方案 #

方案1：遵循单向数据流通过事件同步更新（最推荐）

子组件不直接修改props属性，通过emit事件通知父组件更新原reactive对象：

1. 子组件定义props和emit事件，将需要双向绑定的字段封装为计算属性：

<script setup>
const props = defineProps(['person'])
const emit = defineEmits(['update:person'])

const formName = computed({
  get: () => props.person.name,
  set: (newVal) => {
    emit('update:person', {
      ...props.person,
      name: newVal
    })
  }
})
</script>

<template>
  <input v-model="formName" />
</template>

2. 父组件使用子组件时通过v-model:person绑定原reactive对象即可自动接收更新：

<ChildComponent v-model:person="reactivePerson" />

方案2：子组件本地维护拷贝状态

如果该对象在子组件内有大量表单交互，每次emit更新成本较高，可以在子组件内深拷贝props生成独立的本地reactive状态，可选择在本地状态变更时防抖同步给父组件，或者用户提交操作时再统一emit更新父组件值。

方案3：调整ESLint规则适配开发约定

如果团队内部统一约定允许直接修改props传入对象的深层属性，可以在ESLint配置文件中修改规则参数，关闭深层修改的校验：

// .eslintrc.js 对应规则配置
module.exports = {
  rules: {
    'vue/no-mutating-props': ['error', {
      shallowOnly: true
    }]
  }
}

配置后仅直接修改props根对象时会触发警告，修改对象深层属性不会再抛出提示。

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