오늘은 Vue.JS step 9. 같은 컴포넌트 레벨의 데이터 전달(자식1 -> 자식2)에 대해 포스팅하려고 합니다.
컴포넌트 간의 데이터 전달은 총 2가지가 있습니다.
첫 번째 방법은 서로 컴포넌트끼리 연결되어 event-emit(부모로 전달), props(자식으로 전달)의 형태로
사용되는 데이터 전달 방법이 있고,
두 번째 방법은 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus의 연결 방법이 있습니다.
오늘은 첫번째 방법인 event-emit(부모로 전달), props(자식으로 전달) 방식에 대해 진행하겠습니다.
상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할때는 props를 사용하고,
하위(자식) 컴포넌트에서 상위(부모) 컴포넌트로 데이터를 전달할때는 event-emit를 사용하였습니다.
일반적으로 같은 레벨에 데이터를 옮길때는 간단하게 인식이 되지만 실제로는 상위(부모) 컴포넌트를
거쳐서 같은 레벨의 컴포넌트로 데이터를 전달해야 합니다.
같은 레벨이라는 개념은 사람은 알 수 있지만 Vue는 상위(부모) 컴포넌트를 통해서
같은 레벨이라는 것을 인지할 수 있습니다.
전혀 연관성 없는 컴포넌트끼리도 데이터를 전달하기 위해 상위(부모) 컴포넌트를 생성해야 한다는 단점도 있습니다.
아래 예제 소스코드를 통해 알아보도록 하겠습니다.
component-same-level.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다.
기본적으로 생성된 인스턴스는 Root컴포넌트이기 때문에 하위에
"app-header", "app-content"라는 2개의 컴포넌트를 생성하였습니다.
app-header 컴포넌트의 send-num이라는 데이터가 Root컴포넌트를 거쳐서 app-content 컴포넌트로
전달되는 시나리오입니다.
내용 설명은 하기 블로그 내용을 선행하셨다면 쉽게 이해하실거라 생각합니다.
[Vue.JS] step 7. props 데이터 전달(부모 -> 자식)
[Vue.JS] step 8. event-emit 데이터 전달(자식 -> 부모)
<!-- component-same-level.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>
<style>
.explain{
color:red;
}
</style>
<div id="app">
<!-- Html에서는 kebab-case 표기법 사용 ex) props-data -->
<!-- <[컴포넌트 이름] v-on:[하위(자식) 컴포넌트 이벤트 이름]="[상위(부모) 이벤트 핸들링 메소드 이름]"> </[컴포넌트 이름]> -->
<app-header v-on:send-data="getData"></app-header>
<!-- <[컴포넌트 이름] v-bind:[props 속성 이름] = "[상위(부모) 컴포넌트의 데이터 이름]"></[컴포넌트 이름]> -->
<app-content v-bind:props-data = "num"></app-content>
<p class="explain">Component data send </br>
(AppHeader -> Root -> AppContent)</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template : '<div><p>{{message}}</p></div>',
data(){
return{
message:'bono915.tistory.com 환영합니다.',
sendNum:1004
}
},
created: function(){
// this.$emit('이벤트 이름', 파라미터)
this.$emit('send-data',this.sendNum)
}
}
var appContent = {
// javascript에서는 camelCase 표기법 사용 ex) propsData
template : '<div class="content"> send-data:{{propsData}} </div>',
props: ['propsData'],
}
new Vue({
el:'#app',
data:{
num:0
},
components:{
'app-header':appHeader,
'app-content':appContent
},
methods:{
getData: function(param){
this.num = param
}
}
})
</script>
</body>
</html>
예상 시나리오는 다음과 같습니다.
| sendNum = 1004 app-header(sendNum) -> Root(num) -> app-content(propsData) |
Visual Studio Code에서 component-same-level.html를 마우스 우클릭 후 "Open with Live Server"
또는 키보드로 Alt +L + O 실행하면 다음과 같은 브라우저에 결과물이 나타납니다
개발자 도구(F12)로 Vue 탭을 열어보면 AppHeader 컴포넌트에서 선언한 sendNum이
AppContent 컴포넌트의 propsData에 전달된 것을 확인할 수 있습니다.
지금까지 Vue.JS step 9. 같은 컴포넌트 레벨의 데이터 전달(자식1 -> 자식2)에 대한 포스팅이었습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 11. axios 비동기 서버 통신 (0) | 2022.05.25 |
|---|---|
| [Vue.JS] step 10. eventBus 컴포넌트 간 데이터 전달 (0) | 2022.05.22 |
| [Vue.JS] step 8. event-emit 데이터 전달(자식 ->부모) (0) | 2022.05.18 |
| [Vue.JS] 보간법 디렉티브(Directive) v-bind, v-on 약어 (0) | 2022.05.17 |
| [Vue.JS] step 7. props 데이터 전달(부모 -> 자식) (2) | 2022.05.16 |
