컴포넌트 통신 방식
뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다. 각각의 컴포넌트는 데이터를 각각 관리하고 컴포넌트 간에 데이터를 주고 받기 위해선 Event, Props 속성을 이용해야 한다.
컴포넌트 통신 규칙이 필요한 이유
데이터의 흐름을 추적할 수 있다. 왜냐하면, 데이터는 상위 컴포넌트에서 하위 컴포넌트로만 이동(Props)하고 이벤트 발생은 하위 컴포넌트에서 상위 컴포넌트로만 발생하기 때문이다.
Props 속성
컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법. 상위 컴포넌트에서 하위 컴포넌트로만 이동한다.
특징
Reactivity가Props에도 적용- 읽기 전용 값
예제
// component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<h1>Header</h1>',
props: ['propsdata']
};
new Vue({
el: '#app',
components: {
'app-header': appHeader
},
data: {
message: 'hi'
}
});
</script>
</body>
</html>동작 확인
Props 속성 실습하기
num 값 받아 화면에 표시
// component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header v-bind:propsdata="message"></app-header>
<app-content v-bind:propsdata="num"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<h1>{{ propsdata }}</h1>',
props: ['propsdata']
};
var appContent = {
template: '<div>{{ propsdata }}</div>',
// 각각의 컴포넌트는 고유의 구역이기 때문에
// appHeader의 props 속성 명과 동일하게 사용 가능
// (지역변수와 같은 의미)
props: ['propsdata']
};
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
data: {
message: 'hi',
// 새로 추가
num: 10
}
});
</script>
</body>
</html>동작 확인
Event emit
하위 컴포넌트에서 상위 컴포넌트로 이벤트를 발생시키는 통신 방법
예제
// event-emit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var 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>
</html>동작 확인
Event emit 실습하기
add 버튼 클릭 시 num 값 증가하기
// event-emit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
<app-header v-on:pass="logText"></app-header>
<app-content v-on:increase="increaseNumber"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<button v-on:click="passEvent">click me</button>',
methods: {
passEvent: function() {
this.$emit('pass');
}
}
};
var appContent = {
template: '<button v-on:click="addNumber">add</button>',
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.num++;
}
},
data: {
num: 10
}
});
</script>
</body>
</html>동작 확인
뷰 인스턴스에서의 this
일반적인 자바스크립트 내의 this 키워드는 다음과 같이 사용된다.
var obj = {
num: 10,
getNumber: function() {
console.log(this.num);
}
};
obj.getNumber(); // 10getNumber 함수 내부에 사용된 this는 obj라는 객체의 인스턴스명과 동일한 의미를 가진다.
하지만 뷰 인스턴스의 this는 다르게 사용된다.
var vm = new Vue({
el: '',
data: {
num: 10,
message: 'hi'
},
methods: {
logText: function() {
console.log(this.num);
}
},
components: {
app-header: '<h1>Header</h1>',
app-content: 'content'
}
});logText함수 내부에 사용된 this.num은 뷰 인스턴스의 data안에 선언된 num을 사용하는데 자바스크립트 방식 처럼 밖에 선언되어 있지 않아도 접근이 가능하다.
어떻게 접근이 가능한지 뷰 인스턴스를 콘솔창에 출력해 보면
data에서 정의한 num변수가 뷰 인스턴스 바로 밑에 선언된 것을 볼 수 있다.
따라서 뷰 인스턴스를 생성할 때 파라미터로 전달되는 객체는 일정한 가공을 거쳐서 인스턴스화되고 this키워드를 통해서 직접적으로 data영역에 있는 변수값에 접근할 수 있다.
참고
www.w3schools.com/js/js_this.asp
JavaScript this
The JavaScript this Keyword Example var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; Try it Yourself » What is this? The JavaScrip
www.w3schools.com
medium.com/better-programming/understanding-the-this-keyword-in-javascript-cb76d4c7c5e8
Understanding the “this” Keyword in JavaScript
How the value of “this” is assigned in different scenarios
medium.com
'Dev > Vue.js' 카테고리의 다른 글
| [Vue.js] 라우터 (0) | 2020.09.08 |
|---|---|
| [Vue.js] 컴포넌트 통신 방법 - 응용 (0) | 2020.09.08 |
| [Vue.js] 컴포넌트 (0) | 2020.09.07 |
| [Vue.js] 인스턴스 (0) | 2020.09.07 |
| [Vue.js] Vue와 Reactivity (0) | 2020.09.07 |
댓글