Vue3如何更新props对象并同步变更至多层父组件且规避prop突变警告

问题触发原因 #

触发该ESLint警告的本质是Vue单向数据流原则的强制校验：规则vue/no-mutating-props会静态检测所有对props传入对象的直接写入操作（包括给对象的属性赋值）。原有代码中v-model="item.checked"的写法，本质是在TestField组件内直接修改从prop拿到的item对象的checked属性，完全违反单向数据流规则，哪怕代码运行正常也会触发校验。
核心实现逻辑：所有对item的修改，都必须通过事件向上通知，最终赋值给最顶层父组件的本地响应式数据，再由数据向下传递给所有子组件，全程不对props引用做任何直接写入操作。

方案一：逐层透传update事件（改动最小，适配现有代码结构） #

该方案完全兼容你现有的item透传链路，每一层组件仅需增加极少的代码，不需要调整整体组件调用逻辑。

各层组件的改动逻辑 #

• 最底层交互组件TestField：不再直接绑定props的item属性做v-model，改用计算属性代理v-model的读写逻辑，写入时抛出携带新item对象的update:item事件
  改后代码：

  <template>
      <ToggleField
              v-model="checked"
              :name="`item.${name}.checked`"/>
  </template>
  <script>
  import ToggleField from "./ToggleField";
  export default {
      name: 'TestField',
      components: {ToggleField},
      props: {
          name: {
              type: String,
              required: true,
          },
          item: {
              type: Object,
          },
      },
      // 声明需要抛出的事件，避免ESLint未声明事件警告
      emits: ['update:item'],
      computed: {
          checked: {
              // 读取时从props拿值，不做修改
              get() {
                  return this.item.checked
              },
              // 写入时生成全新的item对象，通过事件抛给上层
              set(newVal) {
                  this.$emit('update:item', {
                      ...this.item,
                      checked: newVal
                  })
              }
          }
      }
  }
  </script>
  

• 中间透传层CustomForm：接收下层抛上来的update:item事件，不需要写任何业务处理逻辑，直接把事件透传给自己的上层即可
  改后代码：

  <template>
      <!-- 增加事件透传，把下层的update事件原封不动抛给上层 -->
      <TestField 
              :name="name" 
              :item="item"
              @update:item="$emit('update:item', $event)"/>
  </template>
  <script>
      import TestField from "./TestField";
      export default {
          name: 'CustomForm',
          components: {TestField},
          props: {
              name: {
                  type: String,
                  required: true,
              },
              item: {
                  type: Object,
              },
          },
          // 声明自身需要抛出的事件
          emits: ['update:item']
      }
  </script>
  

• 最顶层父视图：直接用Vue的组件v-model语法糖绑定本地的item数据，本质就是自动完成item属性传入+update:item事件监听的逻辑
  改后代码：

  <template>
    <!-- 用v-model:item 替代原来的:item绑定，自动监听update:item事件更新本地数据 -->
    <CustomForm name="test" v-model:item="item" />
    {{ item }}
  </template>
  <script>
  import CustomForm from "./CustomForm";
  export default {
      components: {
          CustomForm
      },
      data: () => ({
          item: 
            {name: 'Foo', 'checked': false},  
      }),
  }
  </script>
  

该方案完全兼容现有代码结构，改动量极小；哪怕嵌套链路持续加深，每一层组件都只需要做「透传item prop + 透传update:item事件」两个固定操作，不需要额外编写中间业务逻辑，不会触发ESLint的Props突变校验。

方案二：Provide/Inject 跨层级更新（适合超深层嵌套减少重复代码） #

如果组件嵌套层级超过3层，逐层写事件透传的重复代码太多，可以用Vue的依赖注入能力，直接在最顶层提供item的获取方法和更新方法，深层组件直接调用更新方法即可，不需要中间层做任何透传处理。

实现逻辑 #

• 最顶层父组件：在provide配置中暴露两个能力：一个是获取当前最新item值的方法，一个是直接更新item的方法，避免直接传递item引用导致的响应式丢失问题

  <script>
  import CustomForm from "./CustomForm";
  export default {
      components: { CustomForm },
      data: () => ({
          item: { name: 'Foo', checked: false },  
      }),
      provide() {
          return {
              // 用方法返回最新的item值，避免注入时拿到旧的静态引用
              getItem: () => this.item,
              // 提供直接更新item的方法，深层组件不需要逐层抛事件
              updateItem: (newItem) => {
                  this.item = newItem
              }
          }
      }
  }
  </script>
  

• 深层交互组件TestField：去掉itemprop，直接通过inject拿顶层暴露的方法，用计算属性代理checked值的读写逻辑

  <script>
  import ToggleField from "./ToggleField";
  export default {
      name: 'TestField',
      components: {ToggleField},
      props: {
          name: { type: String, required: true },
      },
      // 注入顶层提供的方法
      inject: ['getItem', 'updateItem'],
      computed: {
          checked: {
              get() {
                  // 读取时调用方法拿最新的item值
                  return this.getItem().checked
              },
              set(newVal) {
                  // 写入时直接调用顶层提供的更新方法，传入新对象
                  this.updateItem({
                      ...this.getItem(),
                      checked: newVal
                  })
              }
          }
      }
  }
  </script>
  

• 中间层的CustomForm组件不需要做任何和item相关的透传逻辑，只需要传递剩余的name prop即可。

关键注意点 #

• ESLint的vue/no-mutating-props规则只会检测对props成员的写入操作，读取、展开、传递props的值都是合规的，不会触发警告；所有更新操作都要生成全新的对象字面量，不要直接对props拿到的对象做属性赋值
• 组件使用$emit抛出事件时，一定要在emits配置中显式声明对应事件名，避免ESLint抛出未声明自定义事件的警告
• 使用Provide/Inject方案时，不要直接在provide中传递静态的this.item值，否则会因为引用固化导致深层组件拿到非响应式的旧值，必须通过方法的形式返回最新的item引用

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