Vue组件中prop值在created钩子中无法获取求助

你的问题出在created钩子的执行时机上：当子组件的created钩子触发时，父组件可能还没把label prop的最终值传递过来（比如父组件的label是通过异步请求、或其他异步逻辑生成的）。Vue的模板是响应式的，当label后续被赋值后，模板会自动重新渲染显示最新值，但created钩子只会执行一次，所以当时捕获到的label是空字符串。

你可以通过监听label prop的变化来触发$emit，确保在label有值的时候再发送消息：

修改组件的script部分：

export default {
  name: "ContentPages",
  emits: ["msgPageTitle"],
  props: {
    label: String
  },
  watch: {
    label: {
      handler(newLabel) {
        // 确保label不为空时再执行
        if (newLabel) {
          console.log(newLabel);
          this.$emit("msgPageTitle", newLabel + " Page");
        }
      },
      // 组件初始化时立即执行一次，避免label初始有值但没触发的情况
      immediate: true
    }
  }
};

如果父组件的label是同步传递的（比如直接写死的字符串），那created钩子应该能拿到值，此时可以检查：

• 父组件是否用:label="xxx"（动态绑定）传递变量，而非label="xxx"（静态字符串，若父组件的xxx是变量会被当成字面量）。
• 父组件的label数据源是否在子组件创建前已经准备完毕。

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