Vue组件中如何为props属性条件设置默认值

Vue 原生支持Props默认值配置，不需要额外手写冗余的条件判断，只要在定义Prop时添加default配置项，父组件未传入对应参数时，框架会自动使用你预设的备用值，这是官方推荐的标准实现方式。

具体修改方式 #

• 将原有直接声明类型的Props定义，改为带配置项的对象格式，每个Prop除了声明type校验类型，新增default字段设置未传参时的备用值
• 模板内的绑定逻辑无需额外修改，Vue会自动处理「传入值优先、无传入值用默认值」的逻辑

修改后的完整组件代码如下：

<template>
  <vue-headful
    :title="title"
    :description="description"
    :url="url"
    :image="image"
/>
</template>
<script>
import vueHeadful from "vue-headful";

export default {
  name: "Meta",
  components: { vueHeadful },
  props: {
    title: {
      type: String,
      default: "站点默认标题" // 自定义未传title时的静态默认值
    },
    description: {
      type: String,
      default: "站点默认SEO描述内容"
    },
    url: {
      type: String,
      // 如果需要动态默认值，可以用函数返回计算结果
      default: () => window.location.href
    },
    image: {
      type: String,
      default: "/default-share-cover.jpg"
    }
  }
};
</script>

注意：如果Prop的类型是对象、数组这类引用类型，default必须写成返回默认值的函数形式，避免多个组件实例共享同一份引用数据导致的异常。上述示例中所有Prop都是字符串基础类型，直接写默认值即可。

特殊场景的手动判断方案 #

如果默认值需要依赖其他组件状态、或者需要更复杂的判断逻辑，不要直接修改Props本身的值（Vue遵循单向数据流规则，直接修改Prop会抛出异常），可以通过计算属性实现条件判断：

export default {
  // 原有props定义保持不变
  computed: {
    realTitle() {
      // 存在传入的title就用传入值，否则返回默认值
      return this.title ?? "站点默认标题"
    }
  }
}

模板内绑定的时候替换为计算属性即可：<vue-headful :title="realTitle" />。无特殊需求的场景优先使用Props自带的default配置，代码更简洁也符合框架设计规范。

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