标签：message log extends rar set lang directive hat ack
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
标签：message log extends rar set lang directive hat ack
原文地址：http://www.cnblogs.com/Answer1215/p/7516304.html
