Vue中子组件接收父组件computed传入的Prop无法更新且干扰父级计算属性

核心原因定位 #

抽离组件后异常甚至影响原内联逻辑，本质是子组件渲染时抛出未捕获错误，中断了Vue的整体渲染更新队列，导致父组件的computed依赖无法正常触发更新，直接卡在初始求值结果。

分步修复方案 #

1. 优先解决子组件的渲染报错问题 #

你给出的子组件代码存在两处会触发运行时报错的逻辑：

• 模板中使用了<spinner>组件，但未在子组件内完成注册（如果是局部引入的组件，必须在子组件的components选项中声明，全局注册的话要确保注册顺序早于SaveButton）
• 按钮的点击事件绑定了submit()方法，但子组件本身没有定义该方法，会沿着作用域向上查找父组件方法，违反组件封装规范的同时，也可能触发找不到方法的报错
  修改为标准的组件通信方式：
  • 子组件内修改点击事件：@click="$emit('submit')"
  • 父组件内监听事件：<SaveButton v-bind:saveState="isSaving" @submit="submit"/>
    这一步可以解决大部分渲染中断的问题。

2. 完善Prop的类型声明 #

当前使用数组形式的props声明过于松散，容易出现隐式转换或传值异常，修改为对象形式并指定类型、默认值：

export default {
  name: "saveButton",
  props: {
    saveState: {
      type: Boolean,
      default: false
    }
  }
}

显式的类型校验可以提前暴露传值错误，避免响应式传递的隐性问题。

3. 简化computed逻辑排查响应式问题 #

你当前的computed依赖了lodash的_.values方法，先简化逻辑测试是否能正常更新：

computed: {
  isSaving() {
    const savingStatus = this.$store.getters["CommonSettings/saving"];
    // 先加空值保护，避免lodash处理非预期值时出错
    if (!savingStatus) return false;
    return Object.values(savingStatus).filter(
      status => status && status != "done"
    ).length > 0;
  }
}

如果简化后功能恢复正常，说明之前的lodash调用在getter返回非预期值时抛出了异常，导致computed求值卡住。

4. 清理冗余逻辑 #

子组件模板中已经给<button>加了v-if="!saveState"，内部的svg、span不需要重复加相同的v-if，避免无意义的重复判断。

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