Vue 공통 컴포넌트 개발 팁 - ChoDragon9/posts GitHub Wiki

sync 수식어

https://kr.vuejs.org/v2/guide/components.html#sync-수식어

양방향 바인딩이 필요한 경우 사용된다.

<comp :foo.sync="bar"></comp>

위 코드는 아래와 같다.

<comp :foo="bar" @update:foo="val => bar = val"></comp>

하위 컴포넌트가 상위 컴포넌트의 foo를 변경하려면, 명시적으로 이벤트를 보내야 한다.

this.$emit('update:foo', newValue)

v-model로 구성된 컴포넌트를 컴포넌트화 하기

v-model로 checkbox, radio로 구성되어 있던 탬플릿을 컴포넌트화하는 방법이다.

  • <child v-model="types">
  • <child>
    1. value props 추가
    2. types data 추가
    3. value 변경 시, type 변경하도록 watch 추가
    4. types 변경 시, v-model="types" 변경되도록. @change="onChange" 추가
    5. onChange에서 this.$emit('input', this.types) 처리
  • 끝

BaseInput 내에 input focus 검토 필요

Input, Textarea

  • v-model 형태로 양방향으로 데이터 통신을 한다.

select

  • Scoped Slot을 통해 옵션 UI를 선택적으로 한다.
  • slot 내부에 있는 값은 기본값이고, 사용측에서 slot 사용 시 커스텀하게 UI를 가져갈 수 있다.
  • 리스트 표시 할 때 <slot :value="option">{{option}}</slot> 형태로 <template v-slot:default="option"></slot>을 받을 수 있지만,
    • Placeholder 부분에도 사용 가능하다.
<template v-if="selectedOption === placeholder">
  {{ selectedOption }}
</template>
<slot
  v-else
  :value="selectedOption"
>
  {{ selectedOption }}
</slot>

위임하기

v-bind="$attrs", v-on="$listeners"로 부모로부터 전달받은 것들을 자식 컴포넌트에 위임할 수 있다.

⚠️ **GitHub.com Fallback** ⚠️