This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. It will take you through extending a component, its properties and methods, and how hooks are triggered along the inheritance tree.
We can define a Parent.ts file, which only contains the logic without any template:
import { Component, Vue } from ‘vue-property-decorator‘; @Component export default class Parent extends Vue { created() { console.log("Parent is created") } click() { console.log("Parent is clicked") } parentClicked() { console.log("Parent is clicked") } }
Then we can extends this Parent Class from a vue component:
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>{{ fullMessage }}</h2> <button @click="click">Click</button> <button @click="parentClicked">Parent Click</button> </div> </template> <script lang="ts"> import { Component, Prop, Vue } from ‘vue-property-decorator‘; import Parent from ‘./Parent‘; @Component export default class HelloWorld extends Parent { @Prop() private msg!: string; // replace computed props get fullMessage() { return `${this.msg} should be fullmessage from a getter` } created() { console.log("Component is created") } click() { alert(‘Should replace what used to be defined in methods objects‘) } } </script>
Once we extends from Parent, HelloWorld Component can inherit its Parent class‘s methods and props.
For example:
Will call parentClicked method from Parent Class from HelloWorld Component.
<!-- HelloWorld.vue --> <button @click="parentClicked">Parent Click</button>
If we don‘t define ‘click‘ method in HelloWolrd component, it will using Parent‘s click() method.
[Vue @Component] Extend Vue Components in TypeScript
原文：https://www.cnblogs.com/Answer1215/p/9410784.html