728x90
Vue에서의 컴포넌트간 통신 흐름
- 상위 컴포넌트 => 하위 컴포넌트로 Props가 내려간다. (데이터가 내려간다.)
- 하위 컴포넌트 => 상위 컴포넌트로 Event가 올라간다.
Vue에서의 Props
- 개념은 react의 Props와 같다. 상위 컴포넌트에서 하위 컴포넌트로 전달해주는 데이터!
- 데이터 흐름 또한 상위 컴포넌트 => 하위 컴포넌트로 같다.
- props를 던져주는 방법은
v-bind:프롭스 속성 이름 ="상위 컴포넌트의 데이터 이름"
<!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">
<!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
<app-header v-bind:propsdata="message"></app-header>
<app-content v-bind:number="number"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let appHeader = {
template: '<h1>{{propsdata}}</h1>',
props: ['propsdata'],
};
let appContent = {
template: '<div>{{number}}</div>',
props: ['number'],
};
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent,
},
data: {
message: 'hi ',
number: 10,
},
});
</script>
</body>
</html>Event Emit
- Vue에서는 하위 컴포넌트에서 상위 컴포넌트로 Event라는것을 보낼 수 있다.
- 방법은 아래와 같다.
- 1) 컴포넌트 template에
v-on:click="passEvent"이런식으로 태그에 달아주고, 하위컴포넌트 methods 객체에 해당 passEvent 메서드를 선언하면된다. - 2) 컴포넌트 호출 부에
v-on:발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"이런식으로 달아주고, Vue 인스턴스에 methods를 선언한다.
- 1) 컴포넌트 template에
- 이렇게 하면 하위 컴포넌트에서 발생하여 Emit으로 끌어올린 Event를 상위로 버블링 시킬 수 있고, 상위 컴포넌트에서 그 이벤트를 캡쳐해서 원하는 메서드를 실행시킬 수 있다.
- React에서는 props로 setState를 내려주거나 function을 내려주는 것이 흔한 패턴이었는데, Vue에선 굳이 그럴 필요가 없이 이벤트를 올려주면 상위 컴포넌트에서 해당 이벤트를 리슨하여 기능을 작동시킬 수 있다.
<!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">
<!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
<app-header v-on:pass="logText"></app-header>
<h2>{{number}}</h2>
<app-content v-on:increase="increaseNumber"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let appHeader = {
template: '<button v-on:click="passEvent">Click me</button>',
methods: {
passEvent: function () {
this.$emit('pass');
},
},
};
let appContent = {
template: '<div><button v-on:click="addNumber">Add</button></div>',
methods: {
addNumber: function () {
this.$emit('increase');
},
},
};
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent,
},
methods: {
logText: function () {
console.log('hi');
},
increaseNumber: function () {
this.number++;
},
},
data: {
number: 10,
},
});
</script>
</body>
</html>
여담
- 이벤트 핸들러 넣으니까 코드가 너무 더러워졌다. 해결방안이 있겠지.
'FrontEnd > Vue 2' 카테고리의 다른 글
| [Vue.js] v-on 디렉티브를 통한 event Handle Methods binding (0) | 2022.09.18 |
|---|---|
| [Vue.js] 데이터 바인딩, 디렉티브 (0) | 2022.09.18 |
| [Vue.js] Axios 라이브러리 (0) | 2022.09.18 |
| [Vue.js] Router 기초 (0) | 2022.09.16 |
| [Vue.js] 같은 레벨의 컴포넌트 간의 데이터 통신 (React의 State 끌어올리기) (0) | 2022.09.15 |
| [Vue.js] Vue 인스턴스, 전역 컴포넌트, 지역 컴포넌트 (0) | 2022.09.15 |
| [Vue.js] 튜토리얼 따라하는데 시작부터 에러 (0) | 2022.09.10 |
| [Vue.js] Vue.js 찍먹을 위한 초기 세팅 (0) | 2022.09.10 |
댓글