vue 썸네일형 리스트형 Vue3 의 자동 컴포넌트 등록 규칙 components/ menu/ Regist.vue ← 이 파일이 MenuRegist 컴포넌트입니다이걸 이제야 알다니? 도대체 MenuRegist 가 어디에 있는거지?왜 Regist.vue 파일을 바라보지? 했다.. 이유가 있었네..// 파일 경로 → 컴포넌트 이름 components/menu/Regist.vue → MenuRegist components/user/Detail.vue → UserDetail components/modal/Search.vue → ModalSearch components/Button.vue → Button 왜 파일명과 컴포넌트 이름이 다른가?Nuxt의 자동 컴포넌트 등록 시스템 때문입니다:파일명: (실제 파일 이름) Regist.vue폴더명: menu/ (네임스페.. 더보기 Vue-emit 이란? emit이란?emit은 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 발생시키는(전달하는) 방법입니다.왜 필요할까?Vue는 단방향 데이터 흐름 원칙을 따릅니다:부모 → 자식: props로 데이터 전달 ✅자식 → 부모: 직접 수정 불가 ❌그래서 자식이 부모에게 "이거 바꿔주세요!"라고 알림을 보내는 게 emit입니다.기본 사용법자식 컴포넌트 (ChildComponent.vue) 클릭부모 컴포넌트 실전 예시: 팝업 닫기자식 (PopupComponent.vue) 닫기 부모 emit vs props 비교props emit방향부모 → 자식자식 → 부모목적데이터 전달이벤트 알림비유편지 보내기 📨전화 걸기 📞간단히 말하면: emit = "부모님~ 여기 좀 바꿔주세요!" 하고 외치는 것! 📣 더보기 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 다음