یک نکته‌ی تکمیلی: آشنایی با vue-property-decorator در vuejs
برای نوشتن کامپوننت با استفاده از type-script ابتدا باید کلاسهای مورد نظر را import کنید و کامپوننت را از Vue مشتق کنید:
همانطورکه مشاهده می‌کنید، مانند Angular برای تعریف کامپوننت از @Component استفاده میکنیم. @Component(componentConfig) شامل تنظیماتی هست که می‌توانید آن را نیز به کامپوننت مورد نظر اعمال کنید :
به عنوان مثال در صورتیکه بخواهیم در کامپوننت فوق از prop استفاده کنیم، به صورت زیر می‌باشد:
که در واقع این کد، معادل کد جاواسکریپتی هست که بدون استفاده از این کتابخانه می‌نویسیم:
اگر با Angular آشنایی داشته باشید، میدانید که برای نوشتن کامپوننت از @Component استفاده میکنیم. یعنی با استفاده از decoratorها می‌توانیم کامپوننتهای پیچیده‌ای را بنویسیم. در پروژه‌های vue.js نیز کتابخانه مشابهی وجود دارد که کار نوشتن کامپوننت‌ها را ساده میکند؛ مانند کتابخانه vue-property-decorator که سورس گیت هاب آن در اینجا قرار دارد. برای کار با آن ابتدا کتابخانه‌های vue-class-component و vue-property-decorator را به پروژه‌ی خود از طریق دستور زیر اضافه میکنیم:
npm install vue-class-component vue-property-decorator --save-dev
<template>
<div>
<p>Long-form v-model example</p>
<input :value="myDataProperty" @input="updateMyProperty($event)"/>
</div>
</template>
<script>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
@Component
export default class App extends Vue {
// Data property
myDataProperty: string;
// Lifecycle hook
mounted () {
this.myDataProperty = 'Boop'
}
// Component method
updateMyProperty ($event) {
this.myDataProperty = $event.target.value
}
}
</script> @Component({ name: 'App', components: { AppModal } }) که در اینجا نام کامپوننت و کامپوننتهای استفاده شده در آن را تعریف کردیم.
در این کتابخانه، decoratorهای دیگری نیز برای استفاده وجود دارند؛ شامل:
@Prop @PropSync @Provide @Model @Watch @Inject @Provide @Emit
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Prop(Number) readonly propA: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC: string | boolean | undefined
} export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean]
}
}
} 
