상하위 컴포넌트 관계
하위 컴포넌트에서는 상위 컴포넌트로 이벤트만 전달합니다.
상위 컴포넌트에서 하위 컴포넌트로는 props만 전달합니다.
※ props속성 : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성
props 속성 정의 하는 방법
Vue.component('child-component',{
props : ['props 속성 이름']
});상위 컴포넌트의 HTML 코드에 등록된 child-component 태그에 v-bind속성을 추가한다.
<child-component v-bind:props 속성 이름 = "상위 컴포넌트의 data 속성"></child-component>
예제 코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>parent child data delivery</title>
</head>
<body>
<div id="app">
<child-component v-bind:propsdata="message"></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child-component',{
props:['propsdata'],
template: '<h2>{{propsdata}}</h2>'
});
new Vue({
el:"#app",
data:{
message:'Hello Vue! passed from Parent component'
}
});
</script>
</body>
</html>
html을 확인하면 이런값이 나오는 것을 확인 할 수 있습니다.
하위 컴포넌트에서 상위 컴포넌트로 이벤트 전달하기
$emit( )을 이용하여 이벤트를 발생합니다.
this.$emit('이벤트명');v-on: 속성을 이용한 이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메소드명"></child-component>
예제 코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>parent child data delivery</title>
</head>
<body>
<div id="app">
<child-component v-on:show-log="printTest"></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child-component',{
template: "<button v-on:click='showLog'>show</button>",
methods:{
showLog:function(){
this.$emit('show-log');
}
}
});
new Vue({
el:"#app",
data:{
message:'Hello Vue! passed from Parent component'
},
methods:{
printTest:function(){
console.log("receive an event");
}
}
});
</script>
</body>
</html>
결과 값
show 버튼을 클릭하면 로그를 출력합니다.
꼭 상하위 관계가 유지해야만 데이터를 전달할 수 있는것이 아닙니다.
이벤트 버스를 통해 관계 없는 컴포넌트에 값을 보낼 수 있습니다.
이벤트 버스 예제
이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue();이벤트를 보내는 컴포넌트
methods:{
메소드명 : function(){
eventBus.$emit('이벤트명',데이터);
}
}
이벤트를 받는 컴포넌트
methods:{
created:function(){
eventBus.$on('이벤트명',function(데이터){
});
}
}
이벤트 버스 예제 코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>parent child data delivery</title>
</head>
<body>
<div id="app">
<child-component></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue를 하나 더 생성한다.
var eventBus = new Vue();
Vue.component('child-component',{
template: "<div>하위 컴포넌트 영역입니다.<button v-on:click='showLog'>show</button></div>",
methods:{
showLog:()=>{
eventBus.$emit('triggerEventBust',100);
}
}
});
new Vue({
el:"#app",
created : ()=>{
eventBus.$on('triggerEventBust',(value)=>{
console.log("이벤트를 전달받음. 전달 받은 값 : "+value);
});
}
});
</script>
</body>
</html>
결과 값
show버튼을 누르면 아래와 같은 값이 log에 나옵니다.
'WEB > Vue.js' 카테고리의 다른 글
| 003. 뷰 컴포넌트(Component) (0) | 2019.11.21 |
|---|---|
| 002. Vue의 라이프 싸이클 (0) | 2019.11.21 |
| 001. Vue.js CDN을 통해 Vue.js 체험 및 뷰 속성 개념 (0) | 2019.11.21 |
| 000. Vue.js란? (1) | 2019.11.20 |
댓글