20190221_VUE_컴포넌트(이벤트 버스)

by duckduck0054

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="texthtml;charset=UTF-8">
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <child-component1></child-component1>
      <child-component2></child-component2>
    </div>
  </body>
  <script type="text/javascript">
  	var eventBus = new Vue();
    
    Vue.component('child-component1', {
    	template: '<div>하위 컴포넌트1 영역입니다.<button v-on:click="showLog">show</button></div>',
      methods: {
      	showLog: function () {
        	alert('eventBus EMIT');
          eventBus.$emit('triggerEventBus', 100);
        }
      }
    });
    
    Vue.component('child-component2', {
        template: '<div>하위 컴포넌트2 영역입니다. 전달받은 값 : {{ number }}</div>',
        created: function() {
            var self = this;
            alert('eventBus ON')
            eventBus.$on('triggerEventBus', function(value){
            self.number += value;
            });
        },
        data: function() {
            return {
            number : 0
            }
        }
    });
    
    var app = new Vue({
    	el: '#app'
    });
  </script>
</html>