Lifecycle Hooks🌱 Vue의 Lifecycle라이프 사이클은 Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 말한다.라이프 사이클 훅은 라이프 사이클 단계에서 사용자가 로직을 추가할 수 있는 단계별 기능이다.라이프 사이클을 잘 알아둬서 낄끼빠빠를 잘하도록 하자 🌱 Options API 와 Composition API 에서의 Lifecycle Hooks Options API Composition API (setup 함수 내부) X setup beforeCreate 필요없음 (setup 함수 내에서 사용하면 된다) created 필요없음 (setup 함수 내에서 사용하면 된다) beforeMounted onBeforeMount mounted onMoun..
Slots🐔 Slots 기본적인 사용 방법slot은 컴포넌트의 재사용성을 높여준다.slot을 통해 하위 컴포넌트를 확장하거나 재정의할 수 있다. 구독하기 slot을 통해 특정 컴포넌트에 콘텐츠를 전달할 수 있다.콘텐츠를 위치시키고 싶은 곳에 slot 배치하고, 사용하는 쪽에서 콘텐츠를 넣으면 된다. 구독하기최종적으로 화면에는 이렇게 구성이 된다. 🐔 Slot의 Fallback Content 기능 기본 slot은 Fallback Content를 제공하는데 상위 컴포넌트에서 콘텐츠가 적용되지 않을때에 대한 default 콘텐츠를 말한다.사용하는 방식은 그냥 slot에 작성하면 된다 🐔 Slot의 Named Slotsslot 요소에 이름을 부여하여 여러개의 ..
Provide와 Inject🗿 Prop Drillingprop drilling이란 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props 를 사용하는데,규모가 큰 컴포넌트 트리가 있다면 자손 컴포넌트와 연관된 모든 자식들에게 props를 전달해야하는 것을 말함.(드릴로 뚫고 내려가는 것 같아서) 이러한 문제를 해결하는게 vue3의 provide와 injectprovide와 inject를 사용하면 부모의 데이터는 계층 구조 상관없이 전달 가능하다. 🗿 Provideexport default { setup() { provide('message', 'hello!'); },};상위 컴포넌트의 setup 함수 내부에서 provide 함수를 ..
내 블로그 - 관리자 홈 전환 |
Q
Q
|
---|---|
새 글 쓰기 |
W
W
|
글 수정 (권한 있는 경우) |
E
E
|
---|---|
댓글 영역으로 이동 |
C
C
|
이 페이지의 URL 복사 |
S
S
|
---|---|
맨 위로 이동 |
T
T
|
티스토리 홈 이동 |
H
H
|
단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.