vue js 컴포넌트 기본 사용법

컴포넌트는 vue js의 강력한 기능 중 하나입니다.

반복적으로 사용되는 코드를 컴포넌트로 만들면 재사용이 가능합니다.

 

1. 등록하는 방법에는 전역과 지역이 있습니다.

전역 등록은 main.js 아래 코드를 넣으면 됩니다.

Vue.component(컴포넌트.name,컴포넌트)

이런 식으로 추가하면 어떤 컴포넌트에서든 사용할 수 있습니다.

 

지역 등록은 사용하고자 하는 부모 컴포넌트의 스크립트 태그에 아래와 같은 형식의 코드를 삽입하면 됩니다.

import 컴포넌트 이름 form 컴포넌트 위치

export default{
	components : {
    	컴포넌트 이름
    }
}

 

그럼 해당 컴포넌트에서만 사용할 수 있습니다.

 

전체적으로 모두 사용한다면 전역으로

일부만 사용한다면 지역으로 등록해야 합니다.

 

사용방법은 아래와 같은 코드를 삽입하면 사용이 가능합니다.

<컴포넌트이름></컴포넌트이름>

 

2. 컴포넌트에서 데이터는 반드시 함수여야 합니다.

data: function () {
    return data
  }

 

3. 컴포넌트 간 데이터 송수신.

부모 컴포넌트에서 자식으로 보낼 때는 props를 사용합니다.

props는 단방향 바인딩만 가능합니다.

부모에서 자식으로는 되지만 반대는 되지 않습니다.

부모 컴포넌트

<자식컴포넌트이름 v-bind:전달할 때의 변수명="어떤 값을 넣어줄 건지"></자식컴포넌트이름>

자식 컴포넌트

{{'전달할 때의 변수명'}}
export default{
	props:['전달할 때의 변수명']
}