typescriptvue.js

Vue class-based-components Extends And Mixins


Hello how can I convert this component in a class-based-component using 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>

Solution

  • I can give you some code examples for creating class based components using the vue property decorator, extending classes and use mixins.

    Vue component, class based:

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

    Extend an existing class:

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

    Creating a mixin:

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

    Inject mixins to component:

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