[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.

原文地址:https://www.cnblogs.com/Answer1215/p/9410784.html

时间: 2024-11-09 03:06:29

[Vue @Component] Extend Vue Components in TypeScript的相关文章

[Vue @Component] Simplify Vue Components with vue-class-component

While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-componentflattens component development by allowing you to add your data properties and handlers directly as properties

[Vue @Component] Load Vue Async Components

Vue provides a straight-forward syntax for loading components at runtime to help shave off initial bundle size. You simply define a function that returns an object with a component property pointing to a promise that loads a component, then Vue takes

前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/details/78133622 vue构造.vue组件和vue实例这三个是不同的概念,它们的关系有点类似于Java的继承概念: 关系:vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件.在大型项目中,用过java开发的都知

Vue.extend和Vue.component的联系与差异

extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件 你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件 var apple = Vue.extend({ -. }) Vue.component('apple',apple) 你可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件 new Vue({ components:{ apple:apple } }) Vue.compon

Vue.mixin Vue.extend(Vue.component)的原理与区别

1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue.mixin( mixin )全局注册一个混入,影响注册之后所有创建的每个 Vue 实例.插件作者可以使用混入,向组件注入自定义的行为. 既然可以影响到注册后的所有实例,那么该方法注入的方法和属性都存放在哪里呢(构造函数的options属性上),我们一起来看看该方法的定义 Vue.mixin = fu

new Vue/Vue.Component/Vue.extend的区别

刚开始学习Vue时,当我们看到创建Vue实例和创建一个组件时,会发现Vue实例的参数和组件参数是那么的相似:当我们学习路由时, 又发现Vue.extend创建的对象和自定义的组件非常的相似,那么这三者究竟是什么关系呢,对于3个对象了解清楚对后续精准编程很有意义, 因此,我们需要好好的了解一下他们的区别和使用场景 Vue.extend和Vue.component区别比较 运行示例 var PageNotFind = Vue.component("pagenotfind",{templat

[Vue @Component] Pass Props Between Components with Vue Slot Scope

Components with slots can expose their data by passing it into the slot and exposing the data using slot-scope in the template. This approach allows you to pass props down from Parent components to Child components without coupling them together. For

[Vue @Component] Pass Props to Vue Functional Templates

Functional templates allow you to create components consisting of only the template tag and exposing the props passed into the template with the props object off of the template context. This approach allows you to build simple configurable templates

使用vue的extend自定义组件开发

index.js import Vue from 'vue' import tip from './tip.vue' const Constructor = Vue.extend(tip); const Tip = (options={})=>{ options.showAlert = options.fn//传来的fn给options,赋值data const vm = new Constructor({ data:options }) vm.$mount() document.body.ap