Vue组件如何检测传入prop是否存在并条件设置属性默认值

你当前的代码存在两个核心问题，导致无法实现传入值判断逻辑：

• 没有通过props选项声明接收外部传入的title属性，外部传入的参数默认会作为非Prop属性挂载到组件根元素上，不会和组件内部的data.title产生关联
• 直接绑定内部data中的固定值，没有做传入值和默认值的合并判断逻辑

方案1：利用Prop默认值（最简便，适合无额外自定义判断的场景） #

Vue的Prop本身就支持默认值配置，外部传入值时会自动覆盖默认值，未传入时自动使用默认值，不需要额外写判断逻辑：

<template>
  <vue-headful :title="title" />
</template>
<script>
import vueHeadful from "vue-headful";
export default {
  name: "Meta",
  components: { vueHeadful },
  props: {
    title: {
      type: String,
      default: "default val" // 配置默认值
    }
  }
};
</script>

方案2：自定义判断逻辑（适合需要额外校验、区分传入场景的情况） #

如果你需要做更灵活的判断（比如传入空值时回退到默认值、对传入值做格式转换），可以结合计算属性实现，需要检测属性是否显式传入时可以借助$attrs判断：

<template>
  <vue-headful :title="finalTitle" />
</template>
<script>
import vueHeadful from "vue-headful";
export default {
  name: "Meta",
  components: { vueHeadful },
  inheritAttrs: false, // 关闭非Prop属性自动挂载到根元素的行为
  props: {
    title: {
      type: String,
      required: false
    }
  },
  computed: {
    finalTitle() {
      // 示例1：只要传入了非空值就用传入值，否则用默认值
      return this.title?.trim() ? this.title : "default val"

      // 示例2：如果需要区分「完全没传title属性」和「传了title但值为undefined」，可以用$attrs判断
      // const isTitlePassed = Object.prototype.hasOwnProperty.call(this.$attrs, 'title')
      // return isTitlePassed ? this.title : "default val"
    }
  }
};
</script>

两种方案都支持以下两种调用方式，逻辑符合预期：

• 传入title时使用传入值：<Meta title="test" />，最终渲染的title为test
• 不传title时使用默认值：<Meta />，最终渲染的title为default val

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