vue3 类组件访问道具

Posted 2023-02-23

【中文标题】vue3 类组件访问道具

【英文标题】：vue3 class component access props

【发布时间】：2021-06-25 16:34:11

【问题描述】：

我在 typescript 中使用带有类组件的 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 都会给我一个错误。

有人可以帮助我吗？ 提前致谢

【参考方案1】：

我对您的建议是遵循使用类组件在 vue 中使用 Typescript 的文档：enter link description here

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

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;
  

【讨论】：

这仅适用于 Vue 2。Vue 3 的 API 已更改。

你查看过 vue 官方文档中的 typescript 组件吗？我只是关注了您正在使用的 vue-class-component 库。使用官方 vue 3 核心更直接：v3.vuejs.org/guide/typescript-support.html#annotating-props

那些文档是指 Vue 本身的 Options API。但是 OP 将 vue-class-component 与 Vue 3 一起使用。这个问题与使用该库有关。

感谢您的反馈！但正如托尼所说，这是针对 vue2 的。我正在寻找最新版本 3

【参考方案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>