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

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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>

 

以上是关于[Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript的主要内容,如果未能解决你的问题,请参考以下文章

[Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

[Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript(代码片

vue-cli3 + ts + vuex

vue-ts 中的“VueRouter”类型上不存在属性“历史”

带有 ts-loader 的 webpack 线程加载器

vue 国际化二