VueJS：子组件修改prop数据后如何更新父组件的computed属性

问题根因 #

这是Vue响应式系统的依赖追踪特性导致的：如果你的computed计算属性仅返回请求对象的顶层引用，没有显式访问需要监听的嵌套属性，或是watch未开启深度配置，嵌套属性的更新不会触发computed重算，对应的watch回调自然也不会执行。

可选解决方案 #

方案1：调整依赖逻辑+开启深度监听（改造成本最低） #

如果仅需要监听请求对象的指定字段，直接在computed中显式访问该字段的完整路径，Vue会自动追踪该属性的更新：

// 父组件示例
computed: {
  // 比如需要监听请求中的page参数
  requestPage() {
    // 显式访问嵌套属性，触发响应式依赖收集
    return this.baseRequestModel.page
  }
},
watch: {
  requestPage(newVal) {
    // 字段更新时自动触发回调
    // 你的业务逻辑
  }
}

如果需要监听整个请求对象的所有属性变更，直接给watch添加deep: true配置即可，无需调整computed：

watch: {
  baseRequestModel: {
    handler(newVal) {
      // 任意属性更新都会触发回调
    },
    deep: true
  }
}

该方案无需调整现有组件的prop透传逻辑，仅修改父组件代码即可生效。

方案2：用全局状态管理（适配多层组件共用场景） #

如果请求模型会被3层及以上的组件共用，直接将请求对象放到Pinia/Vuex等全局状态中管理，所有组件直接从状态实例取数、修改，无需层层透传prop，也不需要维护长事件链。
示例Pinia代码：

// store/request.js 状态定义
export const useRequestStore = defineStore('request', {
  state: () => ({
    baseRequestModel: {
      // 初始化字段
    }
  }),
  actions: {
    updateRequestField(field, value) {
      this.baseRequestModel[field] = value
    }
  }
})

父组件和所有后代组件直接引入该状态实例操作，父组件直接监听状态中的对应属性即可。

方案3：用provide/inject简化透传 #

如果不想引入全局状态，也不想层层传递prop，可以用Vue的provide/inject能力：父组件provide响应式的请求对象，所有后代组件直接inject获取使用，修改属性的响应式逻辑和透传prop完全一致。

// 父组件
import { provide } from 'vue'
export default {
  data() {
    return {
      baseRequestModel: {}
    }
  },
  created() {
    provide('baseRequestModel', this.baseRequestModel)
  }
}

// 任意层级的后代组件
import { inject } from 'vue'
export default {
  created() {
    this.requestModel = inject('baseRequestModel')
    // 直接修改属性即可正常触发响应式
    this.requestModel.key = 'new value'
  }
}

注意事项 #

• 不要在后代组件中直接重新赋值整个请求对象的引用（比如this.requestModel = {}），会破坏响应式关联，仅修改对象的属性即可
• Vue2环境下如果需要给请求对象新增未提前声明的属性，需要用this.$set赋值，否则不会触发响应式更新

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