[Vue @Component] Simplify Vue Components with vue-class-component

Posted 2020-12-24 answer1215

While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-componentflattens component development by allowing you to add your data properties and handlers directly as properties of your class.

 

Install:

npm i --save vue-class-component vue-property-decorator

 

jsonfing.json:

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

 

HelloWorld.vue:

<template>
  <div @click="onClick" class="hello">
    {{message}}
  </div>
</template>

<script>

import {Component, Prop, Vue} from ‘vue-property-decorator‘

@Component({})
export default class HelloWorld extends Vue {
  @Prop({
    default: ‘Default message from Hello World Component‘
  })
  message

  onClick() {
    this.message = ‘Goodbye‘
  }
}
</script>