vue.js - vue3 类组件访问道具

Question

我在打字稿中使用带有类组件的 vue3 我的类看起来像：

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

@Options({
  props: {
    result: Object
  }
})


export default class imageResult extends Vue {
  currentImage = 0;

  getSlides(){
    console.log('result',this.$props.result); // not working
    console.log('result',this.result); // not working too
  }

我的问题是，我怎样才能访问和使用我班级内的财产？

this.result和this.$props.result 都会给我一个错误。

有人能帮我吗？提前致谢

Answer 1

我对您的建议是遵循使用类组件在 vue 中使用 Typescript 的文档：在此处输入链接描述

为了修复您的代码，我认为这应该可行：

import {Vue} from "vue-class-component";
import {Component} from "vue-class-component";

// Define the props by using Vue's canonical way.
const ImageProps = Vue.extend({
  props: {
    result: Object
  }
})

// Use defined props by extending GreetingProps.
@Component
export default class ImageResult extends ImageProps {
  get result(): string {
    console.log(this.result);
    // this.result will be typed
    return this.result;
  }
}

Answer 2

迟到的答案，但也许它会在未来帮助某人。使用 vu3 和 typescript 为我工作

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

export class Props {
  result = prop<string>({ required: true });
}

export default class Foo extends Vue.with(Props) {
  test(): void {
    console.log(this.result);
  }
}
</script>