如何从组件属性访问类成员？

Posted 2023-02-23

【中文标题】如何从组件属性访问类成员？

【英文标题】：How to access class members from component properties?

【发布时间】：2020-07-14 07:08:21

【问题描述】：

我需要创建一个 mixin 来设置标题和元数据。为此，我找到了 vue-meta，效果很好。但我还不熟悉基于打字稿和类的组件。

如何在组件属性metaInfo() 中访问类成员pageTitle？

示例代码：

import Vue from 'vue';
import  Component  from 'vue-property-decorator';

@Component(
  metaInfo() 
    return 
      title: pageTitle, // here I would like to access class member
    ;
  ,
)
export default class headerMixin extends Vue 
  pageTitle: string = 'Page Title'; // definition of class member

【问题讨论】：

你试过this.pageTitle吗？

我试过了，但没有成功。错误消息是：“Vue”类型上不存在属性“pageTitle”。

这是编译错误，不会影响应用程序的工作方式。尝试使用metaInfo(this: headerMixin) ... 修复它。让我知道这是否有效。

很高兴它有帮助。我发布了它，以防其他人有类似的问题。

【参考方案1】：

考虑到metaInfo 函数接收组件实例作为上下文，可以这样做：

@Component(
  metaInfo(this: headerMixin) 
    return 
      title: this.pageTitle
    ;
  ,
)
export default class headerMixin extends Vue 
  pageTitle: string = 'Page Title';