vue3 썸네일형 리스트형 vue 자식 부모관계 컴포넌트명 규칙 좋아요 — 하나하나 차근차근 풀어드릴게요. 이미지와 앞서 본 코드 조각(부모가 자식 컴포넌트를 사용하고 이벤트를 받는 예제)을 바탕으로 가 무엇을 가리키는지, 그리고 그 태그가 어떤 변수/상수와 어떻게 연결되는지를 자세히 설명하겠습니다.---1) 는 무엇을 가리키나?는 Vue 컴포넌트의 템플릿 태그입니다. 실제로는 ChildComponent라는 자바스크립트/TypeScript 모듈(또는 글로벌로 등록된 컴포넌트)을 가리킵니다.즉, 태그 이름() ↔ 자바스크립트에서 등록한 컴포넌트 객체(변수) 사이에 연결(매핑) 이 있습니다.---2) 태그 이름과 변수(또는 상수)는 꼭 같아야 하나?태그 이름과 자바스크립트 변수 이름이 문자 그대로 동일해야 하는 것은 아닙니다.중요한 건 "컴포넌트를 Vue에 등록할 때 .. 더보기 Vue - type="primary" Element Plus UI 버튼 스타일 type="primary"의 의미type="primary"는 Element Plus UI 라이브러리의 버튼 스타일을 지정하는 속성입니다.Element Plus 버튼 타입Primary ButtonSuccess ButtonWarning ButtonDanger ButtonInfo ButtonDefault Button각 타입의 의미와 색상Type 용도 색상primary주요 액션 (저장, 확인 등)파란색success성공 액션초록색warning경고 액션주황색danger위험한 액션 (삭제 등)빨간색info정보성 액션회색(기본값)일반 액션흰색/회색 테두리"태그"가 아니라 "속성"이 태그(컴포넌트)type="primary"는 그 태그의 속성(prop)HTML의 과는 다른 개념입니다실제 사용 예시 저장 취소 삭제El.. 더보기 @update @update의 의미@update:는 Vue 3의 양방향 바인딩을 위한 이벤트 리스너입니다.기본 구조@update:propName="handlerFunction"@는 v-on:의 축약형 (이벤트 리스너)update:는 Vue의 컨벤션 (속성 업데이트를 알림)뒤에 오는 이름은 업데이트할 prop 이름당신의 코드 분석1. @update:show-popup="setShowPopup"searchScreen 컴포넌트 내부에서 show-popup 값이 변경되면$emit('update:show-popup', newValue) 실행부모의 setShowPopup 함수가 호출됨2. @update:scr="updateScr"searchScreen 컴포넌트 내부에서 scr 값이 변경되면$emit('update:scr', ne.. 더보기 이전 1 다음