[ Vue ] defineProps로 정의한 props에 초기 값 설정하기 | withDefaults

2024. 4. 23. 16:03· Vue
목차
  1. 실제 적용 예시 
728x90

props를 넘길 때 어떤 데이터를 받을지 선언하는 defineProps 를 사용하게 되는데, 해당 개념을 사용할 경우 default value 를 설정할 수가 없다. 이에 대한 대안으로 초기 값을 설정해줄 수 있는 것이 withDefaults 이다.

 


 

실제 적용 예시 

 

위 코드의 placeholder의 경우 withDefaults 내용을 적용하지 않았다면 아래의 사진처럼 CommonDate 컴포넌트 각각의  placeholder 안에 값을 계속해서 넣어줘야 되는 번거로움이 존재했다.

 

➡ withDefaults 를 공통 컴포넌트에 적용하여 불필요한 코드를 제거했다.

 

 

 


[ 참고 자료 ] 

https://v3-docs.vuejs-korea.org/api/sfc-script-setup.html#typescript-only-features

 

 

728x90

'Vue' 카테고리의 다른 글

[ Vue ] React와 Vue의 반응성 시스템의 공통점/차이점  (0) 2024.09.30
[ Vue ] Vue 3의 반응성 시스템 (proxy 기반 자동 반응성)  (0) 2024.09.29
[ Vue ] defineProps에 타입을 지정하는 2가지 방법  (0) 2024.03.27
[ Vue ] 의존성 주입 (Provide Injection)  (0) 2024.03.27
[ Vue ] Vue에서 컴포넌트간 데이터를 주고 받는 방법 | Props & Emit  (0) 2024.03.27
  1. 실제 적용 예시 
'Vue' 카테고리의 다른 글
  • [ Vue ] React와 Vue의 반응성 시스템의 공통점/차이점
  • [ Vue ] Vue 3의 반응성 시스템 (proxy 기반 자동 반응성)
  • [ Vue ] defineProps에 타입을 지정하는 2가지 방법
  • [ Vue ] 의존성 주입 (Provide Injection)
ZoD
ZoD
바쁘게 굴러가는 ZoD의 하루~
ZoD
como siempre
ZoD
  • 분류 전체보기 (173)
    • Daily (0)
    • Javascript (16)
      • 모던 자바스크립트 (46)
    • Typescript (8)
    • FrontEnd (7)
    • React (21)
      • tanstack query (1)
      • 라이브러리 (3)
    • Vue (33)
      • Nuxt (11)
      • Quasar (6)
    • CSS (12)
    • Storybook (8)
    • Figma (3)
    • CS 지식 (5)
    • Network (5)
    • 알고리즘 (2)
    • 사이드 프로젝트 (4)
      • ddangkong (4)
      • boncierge (0)
    • 개발, 근데 이제 헛소리를 곁들인 (1)
    • ETC (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

최근 글

hELLO · Designed By 정상우.v4.2.2
ZoD
[ Vue ] defineProps로 정의한 props에 초기 값 설정하기 | withDefaults
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.