728x90
모든 예제 코드는 github에 있습니다.
4. 컴포넌트 통신 방법 - 기본
컴포넌트 통신
- 각각의 컴포넌트는 데이터를 각자 관리한다.(유효 범위를 가진다)
- 상위에서 하위로는 데이터를 내려줌 (props)
- 하위에서 상위로는 데이터를 올려줌 (event)
컴포넌트 통신 규칙이 필요한 이유
- AppHeader → LoginForm → AppFoter → NavigationBar → AppHeader
- 위와 같은 방향으로 데이터를 통신한다면 관계적으로도 어렵고, 버그가 발생할 시 추적하기가 어렵다.
- 위 그림 처럼 아래로만 데이터가 내려가는 컴포넌트 규칙이 생겼을때 데이터의 흐름을 추적할 수 있다.
- 상위에서 하위로 props와 하위에서 상위로 event를 보내준다.
props 속성
v-bind: props 속성 이름 = "상위 컴포넌트의 데이터 이름"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>props</title>
</head>
<body>
<div id="app">
<app-header v-bind:message="message"></app-header>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const appHeader = {
template: "<h1>{{ message }}</h1>",
props: ["message"],
};
const vm = new Vue({
el: "#app",
data: {
message: "Header",
},
components: {
"app-header": appHeader,
},
});
</script>
</html>
props 속성의 특징
- 상위 컴포넌트 데이터 값이 변경되면 하위 컴포넌트 데이터 값도 같이 변경된다.
props 속성 실습
app-content(<div>{{data}}</div>)를 만들고 props로 데이터(num = 10)을 건네주는 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>props</title>
</head>
<body>
<div id="app">
<app-header v-bind:message="message"></app-header>
<app-content v-bind:num="num"></app-content>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const appContent = {
template: '<div>{{ num }}</div>',
props: ['num']
}
const vm = new Vue({
el: "#app",
data: {
num: 10
},
components: {
'app-content': appContent
},
});
</script>
</html>event emit
v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"
this.$emit(이벤트 이름, 넘길 인자...)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Emit</title>
</head>
<body>
<div id="app">
<app-header v-on:pass="sandEvent"></app-header>
<p>{{ num }}</p>
</div>
</body>
<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', 10);
},
},
};
const vm = new Vue({
el: "#app",
data: {
num: 0,
},
components: {
"app-header": appHeader,
},
methods: {
sandEvent: function (num) {
this.num = num
},
},
});
</script>
</html>event emit 실습
- appContent에 있는 addNumber()를 이용해 이벤트를 상위 컴포넌트에 전송하고 상위 컴포넌트에 있는 number : 10의 값을 1를 증가시켜 화면에 출력해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event emit</title>
</head>
<body>
<div id="app">
<app-content v-on:pass="addNumber"></app-content>
<p>{{num}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const appContent = {
template: '<button v-on:click="addNumber">Increase!!!</button>',
methods: {
addNumber: function () {
this.$emit("pass");
},
},
};
const vm = new Vue({
el: "#app",
data: {
num: 0,
},
components: {
"app-content": appContent,
},
methods: {
addNumber: function () {
this.num++;
},
},
});
</script>
</html>뷰 인스턴스에서의 this
- 함수에서 데이터에 접근하기 위해서는
this를 사용해야 한다. - 객체 안에서 다른 속성을 가르킬때, this를 사용하면 해당 객체를 바라보게 된다.(즉 자기 자신이 된다.)
- this 관련글
- this 관련글
const object = {
number: 10,
getNumber: function() {
console.log(this.number);
}
}
object.getNumber(); // 10728x90
728x90
'Lecture > [인프런] Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글
| 6. 라우터 (0) | 2020.07.05 |
|---|---|
| 5. 컴포넌트 통신 방법 - 응용 (0) | 2020.07.05 |
| 3. 컴포넌트 (0) | 2020.07.05 |
| 2. 인스턴스 (0) | 2020.07.05 |
| 1. Vue.js 소개 (0) | 2020.07.05 |
