[Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript

With properties we can follow a one-way parent→child flow communication between components. This lesson shows you how you can pass down properties to class based Vue components by using the @Prop decorator from vue-property-decorator.

We’ll also see how we can set types and even default properties on @Prop!

Install:

npm install --save vue-property-decorator

Child:

<template>
  <div>
      {{fullMessage}}
  </div>
</template>

<script lang="ts">

import Vue from 'vue'
import {Component, Prop} from 'vue-property-decorator'

@Component({})
export default class Child extends Vue {
    message: string = "Hello";
    @Prop({
        type: String,
        default: 'Default Value'
    }) msg: string;

    get fullMessage() {
        return `${this.message},${this.msg}`;
    }
}
</script>

Parent:

<template>
  <div class="hello">
    <h1 v-colorDirective="{color: 'red', backgroundColor: 'blue'}">{{ message }}</h1>
    <button @click="clicked">Click</button>
    <ChildComp msg="'What a good day!'"/>
    <router-link to="/hello-ts">Hello Ts</router-link>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import colorDirective from '../color-directive';

import ChildComp from './Child.vue';

@Component({
  directives: {
    colorDirective
  },
  components: {
    ChildComp
  }
})
export default class Hello extends Vue {
  message: string = 'Welcome to Your Vue.js App'

  get fullMessage() {
    return `${this.message} from Typescript`
  }

  created() {
    console.log('created');
  }

  beforeRouteEnter(to, from, next) {
    console.log("Hello: beforeRouteEnter")
    next()
  }

  beforeRouteLeave(to, from, next) {
    console.log("Hello: beforeRouteLeave")
    next()
  }

  clicked() {
    console.log('clicked');
  }
}
</script>