컴포넌트 통신
📌 상위 컴포넌트와 하위 컴포넌트 간에 통신은 어떻게?
상위에서 하위로는 데이터를 내려준다, 프롭스props 전달
하위에서 상위로는 이벤트를 올려준다, 이벤트 발생(이벤트 버블링)
1️⃣ props 로 데이터 내려주기
- v-bind 메서드
- app-header라는 하위 컴포넌트에 상위 컴포넌트의 message라는 데이터를 내려준다.
<app-header v-bind:propsdata="message"></app-header>
- app-header라는 하위 컴포넌트에 상위 컴포넌트의 message라는 데이터를 내려준다.
-
프롭스 이름은 하위 컴포넌트에서 설정한다.
- props: ['프롭스 이름 짓기']
const appHeader = { template: '<h1>header</h1>', props: ['propsdata'] }
- props: ['프롭스 이름 짓기']
-
바디 태그 내 전체 코드
<body>
<div id="app">
<!-- <app-header v-bind:프롭스 속성 이름="'상위 컴포넌트의 데이터 이름"></app-header> -->
<app-header v-bind:propsdata="message"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const appHeader = {
template: '<h1>header</h1>',
props: ['propsdata']
}
//app-header라는 컴포넌트에 message라는 데이터를 props로 내려줌
new Vue({
el: '#app',
components: {
'app-header': appHeader
},
data: {
message: 'hi'
},
})
</script>
</body>- 상위 컴포넌트에서 data 변경하면 props로 data를 내려준 하위 컴포넌트에도 반영(⭐️ Reactivity)
data 속성의 message를 'hi'에서 'hi merong'으로 변경
app-header 컴포넌트의 props 에도 'hi merong'으로 변경된 것을 확인
2️⃣ 이벤트로 올려주기 (Event emit)
- v-on 메서드
⭐️ v-on:click="passEvent" 와 같이 메서드 쓸 때 따옴표 들어가는 부분은 큰 따옴표로 써야함
const appHeader = {
template: '<button v-on:click="passEvent">Click me</button>',
methods: {
passEvent: function(){
this.$emit('pass')
}
}
}-
app-header(하위 컴포넌트)에서 발생한 이벤트를 Root 인스턴스(상위 컴포넌트)로 전달하기
<app-header v-on: 하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header>- pass라는 이벤트가 app-header에서 내려왔을 때 Root 인스턴스에서 logText라는 메서드를 실행
<app-header v-on: pass="logText"></app-header>
- pass라는 이벤트가 app-header에서 내려왔을 때 Root 인스턴스에서 logText라는 메서드를 실행
- 바디 태그 내 전체 코드
<body>
<div id="app">
<!-- <app-header v-on: 하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
<app-header v-on: pass="logText"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const appHeader = {
template: '<button v-on:click="passEvent">Click me</button>',
methods: {
passEvent: function(){
this.$emit('pass')
}
}
}
new Vue({
el: '#app',
components: {
'app-header': appHeader,
},
methods: {
logText: function(){
console.log('hi');
}
},
})
</script>
</body>3️⃣ 같은 레벨에서의 컴포넌트 전달
- 상위 컴포넌트에 먼저 이벤트 전달 후, 다시 props로 같은 레벨의 하위 컴포넌트에 전달해준다
(app-content 의 클릭 이벤트 -> root에 v-on 메서드로 전달 -> 같은 레벨의 하위 컴포넌트인 app-header에 v-bind 로 props 전달)
걸음마 개발 분투기