Vue 2嵌套组件如何正确更新数组内对象的属性

先明确禁止子组件修改引用类型prop的底层逻辑 #

Vue 单向数据流设计的核心目的是保证状态变更的可追溯性：所有状态的修改逻辑都应该收敛到状态的持有方，避免任意子组件都能修改共享状态，导致项目规模扩大后出现状态变更来源无法排查的问题。
你提到的透传回调不是绕开lint检测，它本身就是符合单向数据流规范的合法实现，只是嵌套层级过深时逐层透传的开发成本太高。另外要注意：Vue 运行时只会拦截prop本身的重新赋值（比如this.input2 = {}），你直接修改引用类型prop的属性不会触发运行时警告，只有lint规则会报突变错误，本质是代码规范层面的约束，不是Vue运行时的强制限制。 #

针对你的场景推荐3种实现方案，按优先度排序： #

1. 全局状态管理方案（推荐中大型项目使用） #

因为你用到的sharedObject本身就是全局单例，直接将它放到Vuex（Vue 2官方配套状态管理工具）的state中管理即可：

• 状态修改逻辑全部收敛到Vuex的mutation中，不需要逐层透传事件、回调或者索引
• 完全符合单向数据流规范，不会触发lint的prop突变报错
  示例代码：

// store mutation 定义
mutations: {
  UPDATE_ELEMENT_SELECTED(state, { elementId, isSelected }) {
    const target = state.sharedObject.arrayElements.find(elem => elem.id === elementId)
    if (target) target.isSelected = isSelected
  }
}

<!-- Component2.vue 触发修改 -->
<template>
  ...
  <q-btn @click="$store.commit('UPDATE_ELEMENT_SELECTED', { elementId: input2.id, isSelected: !input2.isSelected })"></q-btn>
  ...
</template>

注意：给数组元素添加唯一id作为标识，不要用数组索引定位元素，避免数组排序、增删后索引失效的问题。

2. 事件总线方案（适合不想引入Vuex的中小项目） #

Vue 2中可以直接创建一个空Vue实例作为全局事件总线，绕过组件层级直接传递修改事件：

// 入口文件挂载全局总线
Vue.prototype.$bus = new Vue()

<!-- Page.vue 监听修改事件 -->
<script>
export default {
  created() {
    this.$bus.$on('update-element-selected', this.handleUpdateElement)
  },
  beforeDestroy() {
    // 页面销毁时卸载事件，避免内存泄漏
    this.$bus.$off('update-element-selected', this.handleUpdateElement)
  },
  methods: {
    handleUpdateElement({ elementId, isSelected }) {
      const target = this.sharedObject.arrayElements.find(elem => elem.id === elementId)
      if (target) target.isSelected = isSelected
    }
  }
}
</script>

<!-- Component2.vue 直接触发全局事件 -->
<q-btn @click="$bus.$emit('update-element-selected', { elementId: input2.id, isSelected: !input2.isSelected })"></q-btn>

3. Lint规则豁免方案（适合小型历史项目快速修复） #

如果你的团队明确约定所有全局单例类型的prop允许子组件直接修改属性，且能保证不会出现状态追溯混乱的问题，可以在lint配置中添加规则豁免，针对这类引用类型prop的属性修改关闭突变检测。

该方案属于规范妥协方案，不推荐中大型项目使用。

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