[Vue] Property Decorator

Property Decorator

@Prop

@Prop(options: (PropOptions | Constructor[] | Constructor) = {})

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
}

• 각 Prop 타입을 Property의 타입으로 지정하려면 reflect-metadata 사용

import 'reflect-metadata'
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component  
export default class MyComponent extends Vue {  
@Prop() PropA!: number  
}

@PropSync

• @PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
• prop name을 인자로 갖고 있음
• getter/setter가 적용되어 있음

import { Vue, Component, PropSync } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @PropSync('name', { type: String }) syncedName!: string
}

@Watch

• @Watch(path: string, options: WatchOptions = {})

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component  
export default class YourComponent extends Vue {  
@Watch('child')  
onChildChanged(val: string, oldVal: string) {}

@Watch('person', { immediate: true, deep: true })  
onPersonChanged1(val: Person, oldVal: Person) {}

@Watch('person')  
onPersonChanged2(val: Person, oldVal: Person) {}  
}

@Provide / @Inject

• @Provide(key?: string | symbol)
• @Inject(options?: { from?: InjectKey, default?: any } | InjectKey)

import { Component, Inject, Provide, Vue } from 'vue-property-decorator'

const symbol = Symbol('baz')

@Component
export class MyComponent extends Vue {
  @Inject() readonly foo!: string
  @Inject('bar') readonly bar!: string
  @Inject({ from: 'optional', default: 'default' }) readonly optional!: string
  @Inject(symbol) readonly baz!: string

  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'
}

@ProvideReactive / @InjectReactive

• @ProvideReactive(key?: string | symbol)
• @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey)
• 상위 컴포넌트의 값이 변경되면 변경된 값이 반영됨

const key = Symbol()

@Component
class ParentComponent extends Vue {
  @ProvideReactive() one = 'value'
  @ProvideReactive(key) two = 'value'
}

@Component  
class ChildComponent extends Vue {  
  @InjectReactive() one!: string  
  @InjectReactive(key) two!: string  
}

@Emit

• @Emit(event?: string)

  import { Vue, Component, Emit } from 'vue-property-decorator'
  
  @Component
  export default class YourComponent extends Vue {
    count = 0
  
    @Emit()
    addToCount(n: number) {
    	this.count += n
    }
  
    @Emit('reset')
    resetCount() {
    	this.count = 0
    }
  
    @Emit()
    returnValue() {
    	return 10
    }
  
    @Emit()
    onInputChange(e) {
    	return e.target.value
    }
  
    @Emit()
    promise() {
    	return new Promise((resolve) => {
    		setTimeout(() => {
    			resolve(20)
    		}, 0)
    	})
    }
  }

 

## @Ref

-   `@Ref(refKey?: string)`


```js
import { Vue, Component, Ref } from 'vue-property-decorator'
import AnotherComponent from '@/path/to/another-component.vue'

@Component  
export default class YourComponent extends Vue {  
@Ref() readonly anotherComponent!: AnotherComponent  
@Ref('aButton') readonly button!: HTMLButtonElement  
}