<div id="app">
    <child-component v-bind:parent_data_receive="supermessage"></child-component>
</div>

<script>
    //자식 컴포넌트
    Vue.component('child-component', {
        props: ['parent_data_receive'],  //대문자 사용 불가
        template: '<p>제공받은 데이터 영역 : </p>'
    });

    //부모 컴포넌트
    new Vue({
        el: '#app',
        data: {
            supermessage: '부모가 제공한 데이터'
        }
    });
</script>

<div id="app">
    <!-- <child-com v-on:event-name="발생된 이벤트로 인해 전송되는 데이터를 받는 부모단 메소드명"></child-com> -->
    <child-com v-on:event-name="viewData"></child-com>
    <div></div>
</div>

<script>
    Vue.component("child-com", {
        template: `<button v-on:click="showLog">데이터 보기</button>`,
        methods: {
            showLog: function () {
                //(이벤트명, 데이터)
                this.$emit('event-name', 'child가 제공하는 데이터');
            }
        }
    });

    new Vue({
        el: "#app",
        //자식이 제공해주는 데이터를 받는 변수(property, model) 선언
        data: {
            message: "부모데이터",
        },
        methods: {
            viewData: function(value){
                this.message = value;
            }
        }
    });
</script>

<div id="app">
    1. 데이터 발신 : <com1></com1>
    <hr>
    2. 데이터 수신 : <com2></com2>
</div>

<script>
   let eventBus = new Vue();

   //발행 컴포넌트
   Vue.component('com1', {
       template: `<button v-on:click="showLog">버튼</button>`,
       methods: {
           showLog: function(){
               eventBus.$emit('triggerEventBus', 100);
           }
       }
   });

   //수신 컴포넌트
   Vue.component('com2', {
       template: "#two",
       data: function(){
           return {message : []};
       },
       created: function(){
           eventBus.$on('triggerEventBus', this.clickM);
           console.log(1);
       },
       methods:{
           clickM: function(v){
               this.message.push(v);
           }
       }
   });

   new Vue({
      el: "#app" 
   });
</script>