[Vuejs] 컴포넌트 (Component)

🔎 컴포넌트 (Component) 란?

▪️ Vue의 가장 강력한 기능 중 하나이다.

▪️ HTML Element를 확장하여 재사용 가능한 코드를 캡슐화.

▪️ Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용.

▪️ Life Cycle Hook 사용 가능.

▪️ 전역 컴포넌트와 지역 컴포넌트.

 

<template> 안에는 root element가 한 개만 올 수 있다.

 

---

💡 컴포넌트간 통신.

▪️ 상위(부모)-하위(자식) 컴포넌트 간의 data 전달 방법.

▪️ 부모에서 자식 : props라는 특별한 속성을 전달. (Pass Props)

▪️ 자식에서 부모 : event로만 전달 가능. (Emit Event)

 

부모는 자식에게 데이터를 전달할 수 있지만, 자식은 부모에게 데이터를 전달할 수 없다. (단방향 데이터전달)

 

✔️ 상위에서 하위 컴포넌트로 data 전달.

▪️ 하위 컴포넌트는 상위 컴포넌트의 값을 직접 참조 불가능.

▪️ data와 마찬가지로 props 속성의 값을 template에서 사용이 가능.

 

예제) 컴포넌트에 객체 전달.

 

예제) 하위에서 상위 컴포넌트로 이벤트전달.