Vue.js 구성 요소 🔩

• Vue Instance : 레고판
• Vue Component : 레고 블럭
• Vue Router : 레고들을 결합시키는 것
• Vue Template : 이미 만들어져 있는 다양한 형태의 레고 블럭
  

Vue.js 구현 순서 🔧

1. Vue 인스턴스 생성
2. Vue 컴포넌트 설계 및 생성
3. Vue 컴포넌트 내용 구현
   

Component (컴포넌트)

컴포넌트 정의 🧐

• 조합하여 화면을 구성할 수 있는 화면의 특정 영역이자 화면을 구조적으로 설계하기 위한 요소

컴포넌트 형식 (문법) 📗

1. 전역 컴포넌트로 등록

Vue.component ('컴포넌트명', {
    // 컴포넌트 내용 (인스턴스 옵션 속성과 동일)
});

2. 지역 컴포넌트로 등록

new Vue({
    components: {
        // '컴포넌트명': '컴포넌트 내용'
    }
});

전역 컴포넌트와 지역 컴포넌트는 유효 범위가 다름

컴포넌트가 화면에 적용되는 과정 🦾

1. Vue 라이브러리 파일 로딩
2. Vue 생성자로 컴포넌트 등록

Vue.component ('MyComponent', {
    // 컴포넌트 내용
});

3. 인스턴스 객체 생성
4. 특정 화면 요소에 인스턴스 부착
5. 인스턴스 내용, 등록된 내용 변환

<my-component> → <div>

6. 변환된 화면 요소를 사용자가 최종 확인

컴포넌트 통신 📲

• Vue는 컴포넌트마다 고유한 유효범위를 가지고 있기 때문에 같은 웹 페이지라도 데이터를 공유할 수 없음 (직접적으로 데이터 참조 불가)
  → Vue 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 함

Vue.js 데이터 전달 방법 ⛓

• 상위(부모) → 하위(자식) 컴포넌트 간 통신의 경우
  (상위에서 props를 통해 데이터 전달)

  • 하위에서 이벤트를 발생
  • 상위 컴포넌트에서 이벤트 수신
  • 상위 컴포넌트 메서드 호출

• 같은 레벨의 컴포넌트 간 통신의 경우

  • 상위 컴포넌트를 생성
  • 하위 A → 상위 → 하위 B로 전달
    
    → 반드시 상위 컴포넌트가 필요, 불필요한 컴포넌트 발생

• Event Bus를 이용하여 통신하는 방법

  • 이벤트 버스를 위한 인스턴스 1개 생성
  • 이벤트를 보내는 컴포넌트에서 $Emit
  • 이벤트를 받는 컴포넌트에서 $On

출처 📝

• Vue.js 입문자를 위한 공개 세미나
• Do it! Vue.js 입문 - 장기효

위의 내용은 Vue.js를 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌