이전 블로그에서 다뤗더 컴포넌트라는 웹 화면에서 분리 된 공간?
즉 vue 공식 홈페이지의 아래의 사진 처럼
쪼개 놓은 컴포넌트에 통신하는 방법에 대해 알아보고자한다.
Props
데이터를 내려주는것이 props
그렇다면 코드로 한번 작성해서 보자
<!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>
</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>
사진과 같이 propsdata로 받아오는 것을 확인할 수 있었다.
이와 같이 실습해본 결과 porps는 위에서 아래로 데이터를 내려주는 것을 확인할 수 있었다.
Event, emit
<!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">
<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 = this.num + 1;
}
},
data: {
num:10
}
});
</script>
</body>
</html>위의 코드 실습을 통해 함수를 제작하고 이벤트를 어떻게 발생 시키는지를 테스트해보았다.
this
this 얜 무엇인가?
디자이너, 기획자 출신의 개발자