یک نکتهی تکمیلی: آشنایی با vue-property-decorator در vuejs اگر با Angular آشنایی داشته باشید، میدانید که برای نوشتن کامپوننت از @Component استفاده میکنیم. یعنی با استفاده از decoratorها میتوانیم کامپوننتهای پیچیدهای را بنویسیم. در پروژههای vue.js نیز کتابخانه مشابهی وجود دارد که کار نوشتن کامپوننتها را ساده میکند؛ مانند کتابخانه vue-property-decorator که سورس گیت هاب آن در
اینجا قرار دارد. برای کار با آن ابتدا کتابخانههای vue-class-component و vue-property-decorator را به پروژهی خود از طریق دستور زیر اضافه میکنیم:
npm install vue-class-component vue-property-decorator --save-dev
برای نوشتن کامپوننت با استفاده از type-script ابتدا باید کلاسهای مورد نظر را import کنید و کامپوننت را از Vue مشتق کنید:
<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>
همانطورکه مشاهده میکنید، مانند Angular برای تعریف کامپوننت از @Component استفاده میکنیم. @Component(componentConfig) شامل تنظیماتی هست که میتوانید آن را نیز به کامپوننت مورد نظر اعمال کنید :
@Component({ name: 'App', components: { AppModal } })
که در اینجا نام کامپوننت و کامپوننتهای استفاده شده در آن را تعریف کردیم.
در این کتابخانه، decoratorهای دیگری نیز برای استفاده وجود دارند؛ شامل:
@Prop
@PropSync
@Provide
@Model
@Watch
@Inject
@Provide
@Emit
به عنوان مثال در صورتیکه بخواهیم در کامپوننت فوق از prop استفاده کنیم، به صورت زیر میباشد:
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]
}
}
}