Vue 基于类的组件扩展和混合

Question

您好，如何使用 typescript 将此组件转换为基于类的组件？

<script>
import { Line } from 'vue-chartjs'
import { chartLast30Days, chartStylingMethods } from '#/mixins'
import { myChartOptions } from '#/const/charts'

export default {
    extends: Line,
    mixins: [chartLast30Days, chartStylingMethods],
    props: { chartPointsDownloads: Array, chartPointsPlays: Array, chartPointsSales: Array },        
}
</script>

Answer 1

我可以给你一些代码示例，用于使用 vue 属性装饰器创建基于类的组件、扩展类和使用 mixins。

Vue 组件，基于类：

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class MyClass extends Vue {
    created() {
        console.log("Created MyClass");
    }
}
</script>

扩展现有类：

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyClass from './MyClass';
@Component
export default class MyExtendingClass extends MyClass {
  created() {
    console.log("Created MyExtendingClass");
  }
}
</script>

创建一个mixin：

import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class MyMixin extends Vue {
  myMixinValue = 'Fetch my mixin';
}

向组件注入 mixins：

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyClass from './MyClass';
import MyMixin from './MyMixin';
@Component({
  mixins: [MyMixin]
})
export default class MyExtendingClass extends MyClass {
  created() {
    console.log("Created MyExtendingClass");
    console.log(this.myMixinValue);
  }
}
</script>