时间戳

首页 > 解决方案 > 使用组件属性的 Mixin（Vue 2、TypeScript）

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

问题描述

我有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<never, any>”。类型“PageVouchersTable”不可分配给类型“ExpSelectedHandlerMixin”。属性“加载”在“PageVouchersTable”类型中是私有的，但在“ExpSelectedHandlerMixin”类型中不是私有的。

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

这样可行。

但：

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

标签： typescriptvue.jsvuejs2vue-mixin

解决方案

决定去掉 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[] = []

  // ...
}

推荐阅读