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>

创建一个mixin：

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

将mixin注入组件：

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