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

<!DOCTYPE html>
<head>
  <title>EventBus</title>
</head>
<body>
  <div id="app">
    <child-component></child-component>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var eventBus = new Vue()
    Vue.component('child-component', {
      template: '<div>하위 컴포넌트 영역입니다.<button v-on:click="showLog">show</button></div>',
      methods: {
        showLog: function() {
          eventBus.$emit('triggerEventBus', 100)
        }
      }
    })

    var app = new Vue({
      el: '#app',
      created: function() {
        eventBus.$on('triggerEventBus', function(value) {
          console.log("이벤트를 전달받음. 전달받은 값 : ", value)
        })
      }
    })
  </script>
</body>
</html>

<처리 과정>
1. 먼저 이벤트 버스로 활용할 새 인스턴스를 1개 생성하고, eventBus라는 변수에 참조한다. 이렇게 하면 eventBus라는 변수로 새 인스턴스의 속성과 메서드에 접근할 수 있다.

2. 하위 컴포넌트에는 template 속성과 methods 속성을 정의한다. template 속성에는 '하위 컴포넌트 영역입니다'라는 텍스트와 show 버튼을 추가한다. methods 속성에는 showLog() 메서드를 정의하고 메서드 안에는 eventBus.$emit()을 선언하여 triggerEventBus라는 이벤트를 발생하는 로직을 추가한다. 이 이벤트는 발생할 때 수신하는 쪽에 인자 값으로 100이라는 숫자를 함께 전달한다.

3. 상위 컴포넌트의 created 라이프 사이클 훅에 eventBus.$on()으로 이벤트를 받는 로직을 선언한다. 발생한 이벤트 triggerEventBus를 수신할 때 앞에서 전달한 인자 값 100이 콘솔에 출력된다.

저작자표시 비영리 변경금지

'JavaScript > Vue' 카테고리의 다른 글

[Vue.js] router URL의 해시 값(#)을 없애는 법 (0)	2022.06.06
Vue router (0)	2022.06.06
하위에서 상위 컴포넌트로 이벤트 전달하기 : $emit (0)	2022.06.05
상위에서 하위 컴포넌트로 데이터 전달하기 : props (0)	2022.06.05
컴포넌트 간 통신과 유효 범위 (0)	2022.06.05

🐠붕어의 코딩 공부 기록🐠

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

'JavaScript > Vue' 카테고리의 다른 글

댓글

티스토리툴바

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

'JavaScript > Vue' 카테고리의 다른 글

관련글

댓글

티스토리툴바