Vue 입문 - Component

• 데이터 전달
  부모 -> 자식
  부모 : props : ['props 속성 이름'];
  자식 : v-bind:props="props 속성 이름";

<div id ="app">
<child-component v-bind:propsdata="message"></child-component>
</div>
...

<script>
Vue.component('child-component', {
	props : ['propsdata'],
        template: ...,
});
new Vue({
	el:'#App',
        data: {
                message : 'AAA'
              }
            });
</script>

• 이벤트 전달
  자식 -> 부모
  자식 : this.$emit('이벤트명');
  부모 : v-on:이벤트명 : "상위 컴포넌트의 메서드명"

<div id ="app">
<child-component v-on:show-log="printText"></child-component>
</div>
...

<script>
Vue.component('child-component', {
    template: '<button v-on:click="showLog">show</button>',
    methods: {
    			showLog: functoin(){
    			this.$emit('show-log');
    		}
});
new Vue({
	el:'#App',
        methods: {
            printText:function(){
                console.log("received an event");
        }
});
</script>

• 이벤트 전달
  형제 -> 형제
  형제1

var eventBus = new Vue();
methods: { 
메소드명 : function(){
	eventBus.$emit('이벤트명', 값);
}

형제2

var eventBus = new Vue();
methods : {
	created : function () {
                                eventBus.$on('이벤트명' function(값){
                                  ...
                                });
    }
}

<div id ="app">
<child-component></child-component>
</div>
...

<script>
var EventBus = new Vue();
var tempValues = 100;
Vue.component('child-component', {
    template: '<div>child Componet. <button v-on:click="showLog">show</button></div>,
    methods: {
    			showLog: functoin(){
    			eventBus.$emit('triggerEventBus', 'tempValues');
    	     }
});
new Vue({
	el:'#App',
        created: function(){
            eventBus.$on('triggerEventBus':function(tempValues){
                console.log("Received Values : ", tempValues);
        	});
	}
});
</script>