04. Vue.js - 뷰 컴포넌트 통신

(2021.01.12)

 

이 책으로 공부하면서 가장 이해하기 어려웠던 부분이다. 앞부분은 전에 공부했던거랑 내용이 비슷했는데 이거는 처음 보는 부분이라 그런건지 한번에 이해하기 어려웠다...

정리해놓고 여러번 읽어봐야할 것 같다.

 

book.naver.com/bookdb/book_detail.nhn?bid=13256615

Do it! Vue.js 입문

참고도서: 두잇뷰입문

---

 

상 하위 컴포넌트 관계

 

뷰 프레임워크 자체에서 컴포넌트는 각각의 범위가 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없다.

--> 기본적인 데이터 전달방법인 상위-하위 컴포넌트 간의 데이터 전달방법을 이용한다.

 

상 하위 컴포넌트 간 통신 방식

 

 

 

 

상위에서 하위 컴포넌트로 데이터 전달하기

 

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

props 속성을 사용하기 위해서는 아래와 같은 방식으로 하위 컴포넌트의 속성에 정의한다.

 

하위 컴포넌트의 props 속성 정의 방식 

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

 

그 후, 상위 컴포넌트의 HTML 코드에 등록된 child-component 컴포넌트 태그에 v-bind 속성을 추가한다.

<child-component v-bind:props 속성이름="상위 컴포넌트의 data 속성"></child-component>

 

 

props 속성을 사용한 데이터 전달 예제

 

 

props 속성 전달 코드 실행 화면

 

 

 

여기에서 이해하는게 무진장 어려웠다...

 

① new Vue() 로 인스턴스를 생성

② Vue.component()를 이용해서 하위 컴포넌트인 child-component 등록 

③ child-component에 props 속성으로 propsdata 정의

④ HTML 태그 추가

⑤ <chile-component> 태그를 통해 v-bind:propsdata="message" 는 상위 컴포넌트의 message 속성값인 안녕 vue! passed from parent Component 를 하위 컴포넌트의 propsdata로 전달

⑥ child-component의 template속성에 정의된 <p> {{propsdata}} </p> 는 안녕 vue! passed from parent Component 가 됨

 

 

 

 

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

 

하위 컴포넌트에서 특정 이벤트를 실행하면, 상위 컴포넌트에서 그 이벤트를 수신해서 상위 컴포넌트의 메서드를 호출하는 방식으로 하위에서 상위 컴포넌트의 통신이 진행된다.

 

이벤트 발생과 수신은 $emit() 과 v-on: 속성을 이용한다.

this.$emit('이벤트명');    //이벤트 발생

<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>  //이벤트 수신

 

이벤트를 발생시키고 수신하기

 

이벤트 발생 예제 실행 결과 화면

 

 

 

이번에도 여러번 읽으면서 이해했다

 

① [show] 버튼을 클릭하면, 클릭 이벤트 v-onLclick="showLog"에 따라 showLog() 메서드가 실행됨

② showLog() 메서드 안에 this.$emit('show-log')가 실행되면서 show-log 이벤트가 발생함

③ show-log 이벤트는 <child-component>에 정의한 v-on:show-log에 전달되고, v-on:show-log의 최상위 컴포넌트의 메서드 printText()가 실행됨

④ printText()는 received an event@!@!@!@!@!@!라는 로그를 출력함

 

 

 

같은 레벨의 컴포넌트 간 통신

 

이벤트 버스(Event Bus)는 상위 하위 구조를 유지하지 않고 바로 한 컴포넌트에서 다른 컴포넌트로 전달할 수 있다.

 

이벤트 버스 형식

// 이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue();

// 이벤트를 보내는 컴포넌트
methods: {
  메서드명: function() {
    eventBus.$emit('이벤트명',데이터);
  }
}

// 이벤트를 받는 컴포넌트
methods: {
  created: function() {
    eventBus.$on('이벤트명',function(데이터) {
      ...
    });
  }
}

 

 

 

이벤트 버스 구현하기

 

이벤트 버스 예쩨 실행결과 화면

 

 

 

 

① 이벤트 버스로 활용할 새 인스턴스 1개를 생성하고 eventBus라는 변수에 참조

② 하위 컴포넌트에는 template 속성과 methods 속성을 정의함

   --> template 속성에는 하위 컴포넌트 영역입니다 라는 텍스트와 [show]버튼을 추가함

   --> methods 속성에는 showLog() 메서드를 정의하고 메서드 안에는 eventBus.$emit()를 선언해서 triggerEventBus라는 이벤트를 발생하는 로직을 추가함. 이벤트 발생할때 100을 인자로 전달함

③ 상위 컴포넌트의 created 라이프 사이클 훅에 eventBus.$on()으로 이벤트를 받는 로직을 선언함

 

 

[show] 버튼을 클릭해서 showLog()가 실행되면 eventBus의 이벤트가 발생 

  → 발생한 이벤트는 상위 컴포넌트의 created()에 있는 eventBus.$on()에서 전달받음

     → 이벤트와 함께 전달된 인자 값100이 콘솔로그에 출력

 

 

 

---

 

전에 공부했던 책이 더 쉬운것 같다....

컴포넌트 이해하느라 오늘 하루죙일 머리 잡은듯