Vue组件中如何设置prop条件默认值：传入null时也启用默认值

问题根源 #

Vue框架的prop默认值触发规则为：仅当父组件未传递该prop，或传递的显式值为undefined时，才会调用default配置返回默认值。当父组件主动传递null时，Vue会将null作为prop的有效值，不会触发默认值逻辑，因此会出现空内容问题。

错误尝试说明 #

你给计算属性加参数的写法不符合Vue计算属性的语法规范：常规计算属性是基于响应式依赖自动计算的缓存值，不支持直接传入自定义参数，因此该方案不会生效。

正确实现方案 #

推荐通过新增计算属性封装最终使用的图片地址，兼容空值场景：

1. 保留原有prop和默认值配置，新增计算属性处理空值判断

props: {
  image: {
    type: String,
    default() {
       return this.defaultImage
    }
  }
},
computed: {
  defaultImage() {
     return this.$config.baseUrl + '/images/default.jpg'
  },
  // 新增计算属性，模板中直接使用该值即可
  validImage() {
    // 判断传入值为null/空串/undefined时都返回默认图
    if (!this.image) {
      return this.defaultImage
    }
    return this.image
  }
}

2. 组件模板内将原引用image的位置全部替换为validImage即可，父组件调用方式无需任何修改。

拓展优化方案（可选） #

如果需要避免控制台抛出类型不匹配的警告，可以修改prop的类型配置，允许传入null值：

props: {
  image: {
    type: [String, null], // 允许传入字符串和null类型
    default() {
       return this.defaultImage
    }
  }
}

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