迁移Vue3：类式组件无法获取Props最新值问题咨询

这问题我之前迁移Vue3时也踩过坑，核心原因是你在类里声明了和props同名的本地属性，导致类实例内部访问的是本地初始值，而非父组件传递的props最新值。

问题分析 #

你在@Options里定义了titleComponent作为props，但又在类里声明了private titleComponent = 0;——这行代码会创建一个本地的响应式数据，和props重名了。Vue模板渲染时会优先读取props（props优先级高于本地data），所以模板能正常显示，但类里访问this.titleComponent时，拿到的是你初始化的本地值0，自然控制台输出不对。

另外还要注意：Vue的props是单向数据流，不能直接修改props的值，如果需要修改，得把props的值同步到本地data中，再通过事件通知父组件更新。

修复方案 #

方案1：移除本地同名属性（仅读取props）

如果只是需要读取props的最新值，直接移除类里的本地titleComponent声明即可，vue-class-component会自动把props挂载到组件实例上：

import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    titleComponent: {
      type: Number,
      default: 0 // 可选，设置默认值
    }
  }
})
export default class StorePin extends Vue {
  // 移除这行：private titleComponent = 0;

  mounted() {
    // 现在this.titleComponent就是props的最新值
    console.log(this.titleComponent); 
  }

  get propValue() {
    return this.titleComponent; // 直接返回props值
  }
}

方案2：同步props到本地数据（需要修改值时）

如果需要修改这个值，要把props同步到本地data，再监听props变化保持同步：

import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    titleComponent: {
      type: Number,
      default: 0
    }
  }
})
export default class StorePin extends Vue {
  private localTitle = 0; // 本地存储可修改的值

  mounted() {
    console.log(this.titleComponent);
    // 初始化时同步props到本地
    this.localTitle = this.titleComponent;
  }

  // 监听props变化，实时同步到本地
  watch(titleComponent: number) {
    this.localTitle = titleComponent;
  }

  get propValue() {
    return this.titleComponent; // 返回最新的props值
  }

  increment() {
    // 修改本地数据，而非直接修改props
    this.localTitle++;
    // 通知父组件更新props（可选，根据你的业务需求）
    this.$emit('update:titleComponent', this.localTitle);
  }
}

方案3：使用vue-property-decorator简化代码（可选）

如果你愿意额外安装vue-property-decorator（基于vue-class-component的扩展），可以用@Prop装饰器更简洁地定义props，用@Watch监听变化：

import { Vue, Prop, Watch } from "vue-property-decorator";

export default class StorePin extends Vue {
  @Prop({ type: Number, default: 0 }) titleComponent!: number;

  private localTitle = 0;

  mounted() {
    console.log(this.titleComponent);
    this.localTitle = this.titleComponent;
  }

  @Watch('titleComponent')
  onTitleChange(newVal: number) {
    this.localTitle = newVal;
  }

  get propValue() {
    return this.titleComponent;
  }

  increment() {
    this.localTitle++;
    this.$emit('update:titleComponent', this.localTitle);
  }
}

关键总结 #

• 永远不要让本地data和props同名，否则会导致实例内部访问的不是props值。
• 遵守单向数据流规则，不直接修改props，通过本地data中转+emit事件实现父子组件数据同步。

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