오늘은 Vue.JS step 8. event-emit 데이터 전달(자식 -> 부모)에 대해 포스팅하려고 합니다.
하위(자식) 컴포넌트에서 상위(부모) 컴포넌트로 데이터를 상속하기 위해서는
하위(자식) 컴포넌트에서 이벤트를 발생시켜 전달합니다.
디렉티브(directive)의 이벤트 문법인 v-on이 사용되어야 하며
v-on:[하위(자식) 컴포넌트 이벤트 이름]="[상위(부모) 이벤트 핸들링 메소드 이름]" 형태로 선언되어야 합니다.
그리고 하위(자식) 컴포넌트 이벤트 이름은 this.$emit('이벤트 이름', 전달 파라미터) 형태로
$emit() 안에 이벤트 이름과 전달하고자 하는 파라미터를 정의해야 합니다.
파라미터 전달 없이 이벤트만 실행하는 것이 목적이라면
this.$emit('이벤트 이름') 형태로도 사용할 수 있습니다.
아래 예제 소스코드를 통해 알아보도록 하겠습니다.
event-emit.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다.
app-content 컴포넌트에 이벤트만 전달하는 @plus="increase"와
이벤트 및 파라미터를 함께 전달하는 v-on:send-message="getMessage"을 선언하였습니다.
send-message에는 하위(자식) 컴포넌트에서 선언한 데이터인 message를 파라미터로 전달하고자 합니다.
* @표현은 v-on: 의 약어로 같은 의미 입니다.
<!-- event-emit.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}} </br></br>
<!-- <[컴포넌트 이름] v-on:[하위(자식) 컴포넌트 이벤트 이름]="[상위(부모) 이벤트 핸들링 메소드 이름]"> </[컴포넌트 이름]> -->
<!-- @표현은 v-on: 의 약어로 같은 의미 입니다.-->
<app-content @plus="increase" v-on:send-message="getMessage"></app-content>
number : {{num}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appContent = {
template : '<div class="content"> <button v-on:click="addNum">addNumber</button> </div>',
methods:{
addNum : function(){
// this.$emit('이벤트 이름')
this.$emit('plus')
}
},
data(){
return{
message:'bono915.tistory.com 환영합니다.',
}
},
created: function(){
// this.$emit('이벤트 이름', 파라미터)
this.$emit('send-message',this.message)
}
}
new Vue({
el:'#app',
data:{
num:915,
message:''
},
components:{
'app-content':appContent
},
methods:{
increase: function(){
this.num += 1;
},
getMessage: function(text){
this.message = text
}
}
})
</script>
</body>
</html>
위 예제 소스에서 vue인스턴스를 생성하였고, app-content를 하위(자식) 컴포넌트로 선언하였습니다.
개발자 도구(F12)에서 vue 탭을 보면, 컴포넌트의 구성에 대해 다음과 같이 확인이 가능합니다.
생성한 인스턴스는 Root 컴포넌트가 되며, 하위(자식) 컴포넌트에
appContent로 구성되어 있는 것을 확인할 수 있습니다.
Visual Studio Code에서 event-emit.html를 마우스 우클릭 후 "Open with Live Server"
또는 키보드로 Alt +L + O 실행하면 다음과 같은 브라우저에 결과물이 나타납니다.
개발자 도구(F12) vue 탭에서 보면, appContent의 data에 message가 정의되어 있고,
$emit을 통해 이벤트가 전달되어 root의 data에도 message가 전달되어 정의된 것을 확인할 수 있습니다.
또한 하위(자식) 컴포넌트에 있는 addNumber 버튼을 클릭하면 $emit을 통해 이벤트가 전달되어
부모(상위) 컴포넌트에서 number값이 증가하는 것을 확인할 수 있습니다.
지금까지 Vue.JS step 8. event-emit 데이터 전달(자식 -> 부모)에 대한 포스팅이었습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 10. eventBus 컴포넌트 간 데이터 전달 (0) | 2022.05.22 |
|---|---|
| [Vue.JS] step 9. 같은 컴포넌트 레벨의 데이터 전달(자식1 -> 자식2) (0) | 2022.05.20 |
| [Vue.JS] 보간법 디렉티브(Directive) v-bind, v-on 약어 (0) | 2022.05.17 |
| [Vue.JS] step 7. props 데이터 전달(부모 -> 자식) (2) | 2022.05.16 |
| [Vue.JS] step 6. watch vs computed 비교 (0) | 2022.05.11 |
