Vue TypeScript 使用 Mixins

Duke Duke | 99 | 2022-06-17

背景

项目中的多个页面其中的变量及方法重复出现,每个页面组件都去手写一遍,这样的代码量太大,不利于维护。

其次这样的代码也不是特别优雅,那么如何让代码更优雅呢?熟悉面向对象编程的选手都会想到通过继承去把相似的类的操作通过继承来实现。

那么这样的继承在 vue 中怎么实现呢?

环境

实现

上面理论有了 接下来就是实践了

创建 mixin 文件

test.mixin.ts

import { Vue, Provide, Component } from "vue-property-decorator";
@Component
export default class TestMixin extends Vue {
  @Provide() protected version: string = "1.0.0";
}

使用 mixins


<template>
  <button @click="handlerClick">button</button>
</template>

<script lang="ts">
import TestMixin from "@/mixins/test.mixin";
import Test2Mixin from "@/mixins/test2.mixin";
import {Component, Mixins} from "vue-property-decorator";

@Component()
export default class Home extends Mixins(TestMixin, Test2Mixin) {
  private handlerClick() {
    console.log(this.version);
  }
}
</script>

文章标签: vue
推荐指数:

真诚点赞 诚不我欺~

Vue TypeScript 使用 Mixins

点赞 收藏 评论