뷰 컴포넌트간 통신(props)

Note&pen
Vue.js
2018. 3. 30. 15:42

앵귤러1이나 백본과 같은 초창기 자바스크립트

프레임워크에서는 한 화면을 한 개의 뷰로 정의했다.

그래서 한 화면의 데이터를 해당 화면 영역 어디서든지

호출할 수 있었다. 하지만 뷰의 경우 컴포넌트로 화면을

구성해서 같은 웹 페이지라도 데이터를 공유할수 없었다.

왜냐하면 컴포넌트마다 자체적으로 고유한 유효범위(scope)를

갖기 때문이였다. 이는 뷰 프레임워크 내부에서 정의된 특징이다.

따라서 각 컴포넌트의 유혀범위가 독립적이라 다른 컴포넌트의

값을 직접 참조할수가 없다.

먼저 간단하게 예제를 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
  <head>
    <title>Vue Component Scope</title>
  </head>
  <body>
    <div id="app">
      <component1></component1>
      <component2></component2>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      // 첫 번째 컴포넌트
      var cmp1 = {
        template: '<div>첫 번째 컴포넌트 : {{ cmp1Data }}</div>',
        data: function() {
          return {
            cmp1Data : 10
          }
        }
      };
 
      // 두 번째 컴포넌트
      var cmp2 = {
        template: '<div>두 번째 컴포넌트 : {{ cmp2Data }}</div>',
        data: function() {
          return {
            cmp2Data : cmp1.data.cmp1Data
          }
        }
      };
 
      new Vue({
        el: '#app',
        // 지역 컴포넌트 등록
        components: {
          'component1': cmp1,
          'component2': cmp2
        }
      });
  </script>
  </body>
</html>
 
Colored by Color Scripter
cs

위에서는 두 개의 지역 컴포넌트를 등록하고 한 컴포넌트에서

다른 컴포넌트의 값을 직접 참조한다.

component2컴포넌트 내용에서 {{cmp2Data}}는 component1컴포넌트의

data.cmp1Data를 참조하고 있다. 자바스크립트의

객체 참조방식을 생각해보면 참조값 10이 화면에 출력되어야 한다.

하지만 {{cmp2Data}}는 아무값도 출력하지 못한다.

위 소스를 실행하면 아래와같이 출력이된다.

두번째 컴포넌트에 값이 출력되지 못하는것은

앞에서 설명했듯이 컴포넌트의 유효 범위로 인해

다른 컴포넌트의 값을 직접 접근하지 못하기 때문이다.

따라서 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터

전달 방법을 따라햐 한다. 가장 기본적인 데이터 방법은

부모(상위) 자식(하위) 컴포넌트간의 데이터 전달 방법이다.

컴포넌트간의 관계가 부모-자식 으로 이루어진 컴포넌트를 의미한다.

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

그리고 하위에서 상위로는 이벤트만 전달 할 수있다.

먼저 props에대해 알아보자.

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

사용되는 속성이다. props속성을 사용하려면 먼저 아래처럼

하위 컴포넌트의 속성에 정의한다.

다음 상위 컴포넌트의 HTML 코드에 등록된 child-component

컴포넌트 태그에 v-bind속성을 추가한다.

v-bind 속성의 왼쪽 값으로 하위컴포넌트에서 정의한 props속성을 넣고

오른쪽 값으로 하위컴포넌트에 전달할 상위 컴포넌트의 data속성을 넣는다.

다음 소스를 보자.

위 소스는 상위 컴포넌트의 message속성을 하위 컴포넌트에 props로

전달하여 메시지를 출력하는 것이다.

먼저 코드를 순서대로 살펴보자.

먼저 20line에서 Vue인스턴스를 하나 생성한다.

다음 15line 에서 Vue.component()를 사용하여 하위컴포넌트인

child-component를 등록한다. 다음16line에서 child-component의 내용에

props속성으로 propsdata를 정의한다

10line에서 <child-component>태그의 v-bind 속성을 보면 상위 컴포넌트의

message속성값인 Hello Vue! passed from Parent Component 를

하위 컴포넌트의 propsdata로 전달한다.

그래서 17line의 child-component의 template속성에 정의된

<p>{{ propsdata }}</p>는 Hello Vue!~~~~가 되는것이다.

저작자표시

'Vue.js' 카테고리의 다른 글

이벤트 버스(관계없는 컴포넌트 간 통신) (0)	2018.04.03
하위에서 상위 컴포넌트로 이벤트 전달하기 (0)	2018.03.30
뷰 컴포넌트 (0)	2018.03.30
뷰 인스턴스 (0)	2018.03.30
Hello Vue.js! 프로젝트 생성하기 (0)	2018.03.30

Web