My Travel Blog

CodeHat

TS props in Vue

How to add props in TS Vuejs

Sat Jun 19 2021

Props / properties area meant to display initial values on component and also meant to parent - child communication. So how to add a props Vuejs TS class component ?

Props in TS class

TypeScript allow us to separate Props from class, by extending and create a Prop object. I recommend this method.

  • Create props object by extending Vue class
  • Use the object to create our component class
<template>
  <div>{{ this.name }}</div>
</template>
<script>
const nameProp= Vue.extend({
  props: {
    name: {
      type: String,
    },
  },
});
export default class NewComponent extends nameProp {
  //data
  version : 1.0
  //method
  method1(){
  conole.log('some text')  
  }  
};
</script>

Import

Lets import and use the component, place it in your template and specify the props value.

import New from "@/components/New.vue";

<template>
 <New name='Vue'/>
</template>
@Component({
  components: {    
    New
  },
})
...

Comments