Vue组件接收传值时不使用props default如何设置title默认值

当前代码不生效的核心原因有两个：

• 没有显式声明props接收父组件传入的title参数，父组件传值不会自动绑定到组件实例
• data内的变量和待接收的传参同名，就算声明props也会产生命名冲突

具体实现步骤 #

• 新增props配置，声明接收String类型的title参数，不配置default属性，符合你的限制要求
• 将data中存储内部使用值的变量重命名为innerTitle，避免和props命名冲突
• 在created生命周期钩子中做值判断：如果父组件传入的title为有效值，就将innerTitle赋值为传入值；如果未传值/传入值为空，就赋值为默认值"lorem"
• 组件内所有需要用到标题的位置（包括mounted中设置meta标签的逻辑），统一读取innerTitle即可

如果需要支持父组件动态修改传入title的场景，可以新增一个watch监听this.title的变化，变化时同步更新innerTitle的值即可。

修正后的完整组件代码 #

<template>
  <div></div>
</template>
<script>
export default {
  name: "Meta",
  props: {
    title: {
      type: String,
      required: false
      // 未配置default属性，满足业务限制
    }
  },
  data() {
    return {
      innerTitle: ""
    };
  },
  created() {
    // created触发时机早于mounted，能避免赋值延迟导致的取值为空问题
    this.innerTitle = this.title || "lorem"
  },
  mounted() {
    document
      .querySelector('meta[name="description"]')
      .setAttribute("content", this.innerTitle);
  }
};
</script>

效果验证 #

• 调用代码为<Meta title="test" />时，最终innerTitle值为"test"，meta标签的content会被设为test
• 调用代码为<Meta />未传入title时，最终innerTitle值为默认值"lorem"，meta标签的content会被设为lorem

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