使用组件属性的 Mixin（Vue 2、TypeScript）

Posted 2023-02-16

【中文标题】使用组件属性的 Mixin（Vue 2、TypeScript）

【英文标题】：Mixin that uses component properties (Vue 2, TypeScript)

【发布时间】：2021-10-05 19:56:04

【问题描述】：

我有Vue + TypeScript 项目，我们正在使用Vue class components。组件的方法之一被移动到单独的 mixin。该 mixin 使用组件的属性。为了防止TypeScript 抱怨缺少mixin 属性，我创建了与mixin 同名的接口：

export interface ExpSelectedHandlerMixin 
  loading: boolean;
  selected: VouchersPoolTable[];
  currentApplication: string;
  items: VouchersPoolTable[];


@Component()
export class ExpSelectedHandlerMixin extends Vue 
   // ...

然后像这样将 mixin 连接到我的组件：

import  Mixins  from 'vue-property-decorator';

export default class PageVouchersTable extends Mixins(ExpSelectedHandlerMixin) 
   // ...

之后我收到文本错误：

类“PageVouchersTable”错误地扩展了基类“ExpSelectedHandlerMixin & Vue & object & Record”。 类型“PageVouchersTable”不可分配给类型“ExpSelectedHandlerMixin”。 属性“加载”在“PageVouchersTable”类型中是私有的，但在“ExpSelectedHandlerMixin”类型中不是私有的。

好的，我在组件public 中创建了loading、selected、currentApplication、items 属性（只是删除了private 修饰符）。

这行得通。

但是：

是否有可能以某种方式连接使用组件属性的 mixin 而无需创建这些属性 public？

【参考方案1】：

决定去掉mixin文件中不必要的接口声明，在组件中保留共享属性为public。最终版本的代码是：

// Mixin
@Component()
export default class ExpSelectedHandlerMixin extends Vue 
  loading = false

  items: VouchersPoolTable[] = []

  selected: VouchersPoolTable[] = []

  // ...


// Component
import  Mixins  from 'vue-property-decorator';

@Component()
export default class PageVouchersTable extends Mixins(ExpSelectedHandlerMixin) 

  // Next three properties are public to be accessible in ExpSelectedHandlerMixin
  loading = false

  items: VouchersPoolTable[] = []

  selected: VouchersPoolTable[] = []

  // ...