typescript - vue 3 中的 Prop 在类基组件中不可访问

Question

我正在迁移到 vue 3。我无法访问我类的 Prop 值，而是它给了我 0 而不是在控制台中打印我在 Prop 上使用的最新值。在模板上它工作正常，但我想要我类(class)中 titleComponent 的最新值

import { Options, Vue } from "vue-class-component";
    
@Options({
  props: {
    titleComponent: Number
  }
})
    
export default class StorePin extends Vue {
  private titleComponent = 0;
    
  mounted()
  {
    console.log(this.propValue);
  }
 
  get propValue()
  {
    return this.titleComponent;
  }
   
  incremnt()
  {
    this.titleComponent ++ ;
  }
  
}

Answer 1

创建一个声明 Prop 的 Prop 类，然后使用 .with() 方法将其添加到组件中!这将为您提供强大的 TypeScript 支持，您甚至不必使用 “@vue/runtime-core” 库中的 PropType 接口(interface)。

<template>
  <p>Hello world</p>
</template>

<script lang="ts">
import { Vue, Options, prop } from 'vue-class-component';

class Props {
  array: string[] = prop({
    required: true,
  });
}

@Options({})
export default class MyComponent extends Vue.with(Props) {
}
</script>

<style lang="scss" scoped>
</style>