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

【问题标题】：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) {... 修复它。让我知道这是否有效。
很高兴它有帮助。我发布了它，以防其他人有类似的问题。

标签： typescript vue.js vuejs2 vue-component vue-meta

【解决方案1】：

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

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

【讨论】：