客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
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. |
请发表评论