If we prefer to use classes, we can use the class-based components API that comes with Vue.
In this article, we’ll look at how to developing Vue apps with class-based components.
Custom Decorators
We can add our own decorators into our Vue class-based components.
For instance, we can write:
<template>
<div>
<button @click="increment(2)">increment</button>
<p>{{ count }}</p>
</div>
</template>
<script>
import Vue from "vue";
import Component, { createDecorator } from "vue-class-component";
const Log = createDecorator((options, key) => {
const originalMethod = options.methods[key];
options.methods[key] = function wrapperMethod(...args) {
console.log(`Invoked: ${key}(`, ...args, ")");
originalMethod.apply(this, args);
};
});
@Component
export default class HelloWorld extends Vue {
count = 0;
@Log
increment(val) {
this.count += val;
}
}
</script>
We create the Log decorator with the createDecorator method.
We pass in a callback with the options and key parameter.
options has the items in the Vue class component.
key has the name of the properties in the Vue component class.
options.methods lets us access the methods.
Then we can override the method by assigning another function as its value.
Inside the wrappedMethod , we call originalMethod.apply to call the originalMethod with this being the component class instance.
args is the arguments we pass into the component method.
Since we pass in the 2 as the value of val into increment , that will be the value in the args array when we call increment
key is the 'increment' method name when we click on the button.
Extending a Component
One benefit of using a class-based component is that we can create a superclass component that has the shared parts we want to inherit.
For instance, we can write:
<template>
<div>
<p>{{ superValue }}</p>
</div>
</template>
<script>
import Vue from "vue";
import Component from "vue-class-component";
@Component
class Super extends Vue {
superValue = "Hello";
}
@Component
export default class HelloWorld extends Super {}
</script>
We have the Super component class that has the superValue property.
And we have the HelloWorld component class that extends the Super class.
HelloWorld has the superValue property inherited from Super , so we can use it in the template.
Also, we can access the value within the child component class.
For instance, we can write:
<template>
<div>
<p>{{ superValue }}</p>
</div>
</template>
<script>
import Vue from "vue";
import Component from "vue-class-component";
@Component
class Super extends Vue {
superValue = "Hello";
}
@Component
export default class HelloWorld extends Super {
created() {
console.log(this.superValue);
}
}
</script>
We log the this.superValue property inherited from the Super class in the created hook.
And we should see 'Hello' logged.
Conclusion
We can add custom decorators and superclass components into our Vue app when we use class-based components.
