Dynamic components (동적 컴포넌트)🚗 Dynamic component란렌더링되는 컴포넌트를 동적으로 변경되는 것특정 조건에 따라 다른 컴포넌트를 mount하는 것 🚗 Dynamic component 사용법컴포넌트를 동적으로 변경하고 싶을 때 v-bind: is 속성을 활용한다. (1) 동적 컴포넌트 생성 (2) 동적으로 컴포넌트 변경하기 (shallowRef가 ref 보다 퍼포먼스가 더 좋다)// const currentComp = ref(자식컴포넌트);const currentComp = shallowRef(자식컴포넌트); ※ shallowRef와 ref의 차이둘다 반응형이다.shallowRef는 ref의 얕은 버전이다.shallowRef는 속성에 대해서는 반응하지 않고 값(.va..
vue3 defineProps는 props 옵션과 동일한 값을 허용한다.defineEmits는 emits 옵션과 동일한 값을 허용한다. 특징1. 전달된 옵션을 기반으로 타입 추론을 제공한다.특징2. 전달된 옵션은 setup() 에서 모듈 영역으로 호이스팅된다. 따라서 옵션은 setup() 영역에 선언된 지역 변수를 참조할 수 없다. (컴파일 오류)특징3. 하지만 import 된 옵션은 사용할 수 있다. (import도 모듈 영역이라 호이스팅 되기 때문에) .. 아 졸라 복잡하네특징4. script setup 을 사용하는 컴포넌트는 기본적으로 Template refs나 $parent와 같은 컴포넌트간 통신이 닫힌다. 🍬 script setup 에서의 $slots와 $attrsscript setup ..
Template refs☁ refs를 사용하는 이유vue의 선언적 렌더링 모델 대부분은 직접적인 DOM의 작업을 대신 수행한다. 하지만 때론 기본 DOM 요소에 직접 접근해야 하는 경우, ref 속성을 사용해서 쉽게 접근할 수 있다. 특수 속성 ref에 의해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있다. ☁ refs 접근하기composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 한다. 또한 컴포넌트가 마운트된 후에 접근이 가능하다.template 안에서 input으로 refs 참조에 접근하려는 경우 렌더링 되기 전에는 참조가 null이다.template의 내장 객체 $refs로 refs 참조에 접근할 수 있다. {{ item }}..
| 내 블로그 - 관리자 홈 전환 |
Q
Q
|
|---|---|
| 새 글 쓰기 |
W
W
|
| 글 수정 (권한 있는 경우) |
E
E
|
|---|---|
| 댓글 영역으로 이동 |
C
C
|
| 이 페이지의 URL 복사 |
S
S
|
|---|---|
| 맨 위로 이동 |
T
T
|
| 티스토리 홈 이동 |
H
H
|
| 단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.
