만들며 공부하는 Vue.js + SpringBoot + JPA(2)

Vue 컴포넌트

복잡한 화면을 조합하여 구성하도록 재사용 가능한 Vue인스턴스이다

지역/ 전역으로 구분된다

컴포넌트를 등록하면 동시에 상위 컴포넌트가 된다

1. 전역 컴포넌트

Vue.component(' 이름 ' , {

});

 

2. 지역 컴포넌트 

new Vue({
	components: {
    	' 이름 ' : 내용 
    }
})

컴포넌트 명명 규칙 : 

1) 케밥케이스 : 소문자 + -

HTML 템플릿에서 그대로 이름을 사용한다

2) 파스칼케이스: 맨앞단어 대문자

HTML 템플릿에서 1) 2) 두가지 모두 사용가능하다

 

컴포넌트 통신:

Vue 컴포넌트는 기본적으로 데이터 주고받기 불가능 -> props를 이용하여 가능하다

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성이다

v-bind를 통해 넘겨준다