标签：div ted string ESS type tree should from hooks
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
标签：div ted string ESS type tree should from hooks
原文地址：https://www.cnblogs.com/Answer1215/p/9410784.html
