Written by angular-style
on 2021-02-19

[vue.js] vue component 통신

컴포넌트끼리 통신가능?

앵귤러, 백본같은 초기 자바스크립트 프레임워크의 경우, 한 화면을 한개의 뷰로 간주

vue.js는 컴포넌트로 화면을 구성하므로, 같은 웹 페이지라도 데이터 공유 가능.(컴포넌트마다 자체적으로 고유한 유효범위(scope)이 있기때문에)

Vue Component Scope // 첫 번째 컴포넌트 내용 var cmp1 = { template: '

첫 번째 지역 컴포넌트 : {{ cmp1Data }}

', data: function() { return { cmp1Data : 100 } } }; // 두 번째 컴포넌트 내용 var cmp2 = { template: '

두 번째 지역 컴포넌트 : {{ cmp2Data }}

', data: function() { return { cmp2Data : cmp1.data.cmp1Data } } }; new Vue({ el: '#app', // 지역 컴포넌트 등록 components: { 'my-component1': cmp1, 'my-component2': cmp2 } });

자바스크립트 객체 방식으로 보면, cmp2Data는 my-component1의 data를 참조하고 있지만, 값을 출력할 수 없음.

이유는, 값을 직접 참조할 수 없기 때문. 이렇게 다른 컴포넌트 값을 참조할 수 없기 때문에, 데이터 전달 방식에 따라 일관된 구조로 애플리케이션 작성이 가능.

상위, 하위 컴포넌트 관계

가장 기본적인 데이터 전달 방법: 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달

상위에서 하위는 props라는 특별한 속성을 전달.

하위에서 상위로는 기본적으로 이벤트만 전달.

상위에서 하위로 데이터 전달하기

props 속성

props: 상위에서 하위로 데이터 전달할 때 사용.

1. 하위 컴포넌트 속성 정의

Vue.component('child-component', { props: ['props 속성 이름'], });

2. HTML 코드에 등록된 child-component 컴포넌트 태그에 v-bind 속성을 추가.

v-bind 속성의 왼쪽값에 하위 컴포넌트에서 정의한 props(아래에선 propsdata)를 넣고,

오른쪽 값으로 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성(아래에선 message)을 지정.

예제

Vue Props Sample Vue.component('child-component', { props: ['propsdata'], template: '

', }); new Vue({ el: '#app', data: { message: 'Hello Vue! passed from Parent Component' } });

코드 순서대로 봐보자!

1. new Vue()로 인스턴스를 생성

2. Vue.component()를 이용하여 하위 컴포넌트인 child-component를 등록.

3. child-component의 내용에 props 속성으로 propsdata를 정의

4. HTML에 컴포넌트 태그 추가, 태그의 v-bind 속성을 보면, v-bind: propsdata="message"라는 상위 컴포넌트의 message 속성 값인 Hello Vue! passed from Parent Component 텍스트를 하위 컴포넌트의 propsdata로 전달.

5. child-component의 template 속성에 정의된 {{ propsdata }}는 Hello Vue! passed from Parent Component가 됨.

컴포넌트의 관계?

child-component를 전역으로 등록한거 외에는 상위 컴포넌트 지정이 없었음. 어떻게 될까?

그 이유는 컴포넌트를 등록함과 동시에 뷰 인스턴스 자체가 상위 컴포넌트가 되기 때문.

하위에서 상위 컴포넌트로 이벤트 전달

이벤트 발생과 수신

from http://racoonlotty.tistory.com/269 by ccl(A) rewrite - 2021-02-19 18:27:14

Top