상위컴포넌트 <-> 하위컴포넌트 데이터 전달 (props, $emit)

상위 컴포넌트에서 하위컴포넌트로 데이터를 전달할때는 props를 쓸 수 있다.

*상위 컴포넌트*

// HTML
<ComponentName v-bind:propsdata="Items"></ComponentName>

//Js
import ComponentName from './components/ComponentName.vue';
export default {
	data:function(){
    	return{
        	Items:['blue','red','green']
        }
    },
    components:{
    	'ComponentName' : ComponentName
    }
}

*하위 컴포넌트*
//JS
export default {
	props : ['propsdata']
}

 

반대로 하위컴포넌트에서 상위로 넘길때는 $emit을 쓸수있다.

*상위 컴포넌트*
//HTML
<ComponentName v-on:emitEvent="EventAlert"></ComponentName>

//Js
export defualt{
	methods:{
    	EventAlert:function(eventToData)
        	alert(eventToData);
        }
    }
}

*하위 컴포넌트*

//Js
export defualt{
	data:function(){
    	return{
        	eventData:'event'
        }
    }
	methods:{
    	fncEvent:function()
        	this.$emit('emitEvent',this.eventData);
        }
    }
}