목록[Vue3] 커스텀 달력 구현 (1)

Nellie's Blog

[Vue3] 커스텀 달력 구현

아래와 같은 커스텀 달력 구현을 완료하였다. props, emit 을 사용하여 약간 복잡해보이는 로직이어서 조금 어려웠다. 개발은 환자의 일정 리스트의 개수를 달력에 보여주고, 클릭을 하면 해당 일정의 리스트의 상세내역을 보여준다. 주요 컴포넌트는 단 두개이다. list 컴포넌트(부모) / ExmpleFull(달력, 자식) 컴포넌트. 구현 과정 list 컴포넌트 : 리스트의 수를 가져와서 {날짜 : 상세데이터} 오브젝트로 만들어주고, 달력 컴포넌에 props로 해당 오브젝트를 넘겨주고, ExampleFull 컴포넌트 : 달력 컴포넌트에 해당 날짜의 상세데이터.length를 읽어서 표시해준다. 클릭 시에는 부모 컴포넌트에 emit으로 날짜를 넘겨주고, list 컴포넌트 : 부모 컴포넌트는 emit 으로 받..
Frond-end/Vue 2024. 3. 25. 18:15
이전 Prev 1 Next 다음