Vue中props配置validator校验不通过时如何设置默认值

首先说Vue原生Prop规则的既定逻辑：

• default 配置只有在父组件完全没传这个Prop的时候才会生效，不管是类型校验失败还是自定义validator校验失败，Vue都只会在开发环境输出控制台警告，不会自动把值替换成默认值
• 你现在写的配置存在逻辑冲突：required: true 代表这个Prop必须由父组件传入，这种情况下你写的default永远不会触发
• 自定义validator是纯校验函数，设计上就不允许写副作用逻辑，别尝试在validator里修改传入值实现回退，不同Vue版本对validator的执行时机处理不一致，很容易出现不可预期的问题

推荐方案（符合Vue单向数据流规范） #

用计算属性做一层中转校验，组件内部统一使用校验后的计算属性，既能保留开发环境的校验告警提醒调用方，又能实现非法值自动回退：

export default {
  props: {
    currentStep: {
      type: Number,
      required: true,
      // 保留原校验规则，开发环境传错值会输出告警
      validator: (value) => value <= 3
    }
  },
  computed: {
    // 组件内部所有逻辑不要直接取this.currentStep使用，统一调用这个计算属性
    validCurrentStep() {
      // 按业务规则写判断：不满足校验规则就回退为1
      return this.currentStep <= 3 ? this.currentStep : 1
      // 如果你需要的逻辑是传入值小于3时强制设为1，把上面的判断替换为下面这行即可
      // return this.currentStep >= 3 ? this.currentStep : 1
    }
  }
}

不推荐的实现方式 #

如果非要在Prop传入阶段就修正值，可以在beforeCreate钩子里修改组件实例上的Prop值，但这种写法违反Vue单向数据流约定，父组件重新传递Prop时会直接覆盖你修正后的值，仅适合极特殊场景使用：

export default {
  props: {
    currentStep: {
      type: Number,
      required: true,
      validator: (value) => value <= 3
    }
  },
  beforeCreate() {
    // 注意：父组件更新Prop时，这个修正值会被覆盖
    const propsData = this.$options.propsData
    if (propsData.currentStep > 3) {
      propsData.currentStep = 1
    }
  }
}

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