正文
[Vue @Component] Extend Vue Components in TypeScript
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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.
