[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(代码片