컴포넌트 통신 ( v-bind와 v-on)

Vue에서는 상위 컴포넌트, 하위컴포넌트가 존재한다. 어찌보면 당연한 것이다.

컴포넌트를 어렵게 이해할 필요 없이 고유한 데이터의 범위를 갖는다고 생각하면 된다.

특히, html 상에서 요소로 구분되어지는 부분에 해당한다고 할 수 있을 것이다.

 

상위 컴포넌트는 props를 하위 컴포넌트에 전달하며,

하위 컴포넌트는 event를 상위 컴포넌트에 전달한다.

 

컴포넌트를 왜 사용해야 할까? 컴포넌트로 캡슐화를 하여 독립성을 유지한다고 생각된다.

자신의 상위 컴포넌트가 아닌 엉뚱한 곳에서 호출이 되는 것을 막을 수 있다.

 

 

*v-bind

props의 경우, v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"의 형태로 저장된다.

ex) v-bind:propsdata="message"

 

프롭스 속성이름이란, props: ['propsdata']에서 propsdata를 의미하고,

상위 컴포넌트의 데이터 이름이란, data : { message: 'hi' }에서 message를 가리킨다.

 

props는 component 내에 저장되어 있으며, 같은 component 내에 있는 template 안에 {{ propsdata }} 를 통해서 사용이 가능하다. 이렇게 사용을 하면, 데이터 변경 시 자동으로 view에서 값이나 화면이 바뀌는 것을 볼 수 있다.

 

data는 components와 같은 계층에 존재하며, 관련된 초기 내용을 저장하는 것으로 예상된다.

 

 

*v-on

click 이벤트와 관련되어서 작동한다. 

v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드"의 형태로 저장된다.

ex) v-on:pass="logText"

 

하위 컴포넌트에서 발생한 이벤트 이름이란, methods: { passEvent : function() { this.$emit('pass'); }를 의미하고

상위 컴포넌트의 메서드란 methods: { logText: function() { console.log('hi'); }}를 의미한다.

 

하위 컴포넌트에서 발생한 이벤트는 component 내에 정의되어 있으며 emit을 사용한다.

또한 같은 component 내에 template : <button v-on:click="passEvent">click me</button>를 만들어

버튼 클릭 시, passEvent가 발동된다.

 

상위 컴포넌트는 components와 같은 계층에 있으며 이름과 같이 method 내에 정의한다.

 

하위 컴포넌트에서 passEvent 함수에서 pass를 등록했으므로, 상위 컴포넌트에서 pass를 인식하도록 한 것이다. 

그 이후, 상위 컴포넌트의 logText 메소드를 실행한다.

 

v-bind와 v-on을 공부한 후, 공통점을 찾았다. 각각 하위 컴포넌트에서 이름이 나온 후에 삼ㅇ위 컴포넌트의 내용들이 나온다. 구조를 잘 파악하고 있으면 직관적인 이해가 더 잘 될 것이다. 결국 유기적으로 각 상위, 하위 컴포넌트들의 관계를 잘 살펴보고 연결해야 할 것이다.