컴포넌트(Component)
컴포넌트는 Vue의 가장 강력한 기능 중 하나이다.
HTML Element를 확장하여 재사용 가능한 코드를 캡슐화한다.
Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용할 수 있다.
Life Cycle Hook 사용 가능하다.
전역 컴포넌트와 지역 컴포넌트가 있다.
전역 컴포넌트를 등록하려면 Vue.component(tagName, options)를 사용한다.
컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다.
컴포넌트 간 통신
상위(부모) - 하위(자식) 컴포넌트 간의 data 전달 방법
부모에서 자식 : props라는 특별한 속성을 전달한다. (Pass Props)
자식에서 부모 : event로만 전달 가능 (Emit Event)
상위에서 하위 컴포넌트로 data 전달
하위 컴포넌트는 상위 컴포넌트 값을 직접 참조 불가능하다.
data와 마찬가지로 props 속성의 값을 template에서 사용이 가능하다.
동적 props
v-bind를 사용하여 부모의 데이터에 props를 동적으로 바인딩할 수 있다.
데이터가 상위에서 업데이트될 때마다 하위 데이터로도 전달된다.
다음 간단한 코드를 통해 렌더링 과정을 알아보자.
<body>
<div id="app">
<h2>props test</h2>
<child-component propsdata="안녕하세요"></child-component>
</div>
<script>
//하위 컴포넌트
Vue.component("ChildComponent", {
template: `<span>{{ propsdata }}</span>`,
props: ['propsdata'],
});
new Vue({
el: "#app",
});
</script>
</body>
◆ 렌더링 과정
1. new Vue()로 상위 컴포넌트인 인스턴스를 하나 생성한다.
2. Vue.component()를 이용하여 하위 컴포넌트인 child-component를 생성한다.
3. <div id="app"> 내부에 <child-component>가 있기 때문에 하위 컴포넌트가 된다. 처음 생성한 인스턴스 객체가 #app의 요소를 가지기 때문에 부모와 자식 관계가 성립한다.
4. 하위 컴포넌트에 props 속성을 정의한다. ['propsdata']
5. html에 컴포넌트 태그(child-component)를 추가한다.
6. 하위 컴포넌트에 v-bind 속성을 사용하면 상위 컴포넌트의 data의 key에 접근이 가능하다. (message)
7. 상위 컴포넌트의 message 속성 값인 String 값이 하위 컴포넌트의 propsdata로 전달된다.
8. 하위 컴포넌트의 template 속성에 정의된 '<span>{{ propsdata }}</span>에게 전달된다.
'개발 > 기타' 카테고리의 다른 글
| [Vue.js] Vue event, Vue router, SFC, Vuex 간단 정리 (0) | 2022.06.16 |
|---|---|
| [Vue.js] Vue 디렉티브(Directive)란? (0) | 2022.06.14 |
| [Vue.js] Vue 인스턴스(instance)란? (0) | 2022.06.14 |
| [TIL] JSP/Servlet - Session & Cookie (세션 & 쿠키) (0) | 2022.04.05 |
| [TIL] EL, JSTL (Expression Language, JSP Standard Tag Library) (0) | 2022.04.05 |