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

Question

您好如何使用打字稿将该组件转换为基于类的组件？

<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>

创建混入：

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>