Vue Property Decorator

์•ž์—์„œ ์‚ดํŽด๋ณธ ๋ทฐ ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ(vue-class-component) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ด์™ธ์—๋„ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋ทฐ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์œ ์šฉํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ทฐ ํ”„๋กœํผํ‹ฐ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ(Vue Property Decorator) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

์ฐธ๊ณ ๋กœ ๋ทฐ ํ”„๋กœํผํ‹ฐ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ทฐ ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋ง›๋ณด๊ธฐ ์ฝ”๋“œ

Vue Property Decorator๊ฐ€ ์ ์šฉ๋œ ์ฝ”๋“œ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.









ย 




ย 



<!-- Child.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class Child extends Vue {
  // '!'๋Š” ์ดˆ๊ธฐํ™” ์†์„ฑ์— ๋ถ™์ด๋Š” prefix (ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—๊ฒŒ ๋ฏธ๋ฆฌ ์•Œ๋ ค์ฃผ๋Š” ์—ญํ• )
  @Prop() private msg!: string;
}
</script>

์œ„ ์ปดํฌ๋„ŒํŠธ๋Š” ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ msg๋ผ๋Š” props ์†์„ฑ์„ ๋‚ด๋ ค ๋ฐ›์€ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ์ž„ํฌํŠธํ•œ Prop ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋กœ ๋‚ด๋ ค ๋ฐ›์€ props ์†์„ฑ์„ ์ •์˜ํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค. ๋งŒ์•ฝ ํ”„๋กญ์Šค ์†์„ฑ์— Props Validation์„ ์ฃผ๊ณ  ์‹ถ๋‹ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ •์˜ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

@Prop(String) private msg!: string;
@Prop([String, Number]) private msg!: string;
@Prop({ default: 'hi' }) private msg!: string;