[Vue.js 시작하기] 2. Vue.js 컴포넌트
01. 컴포넌트
Vue Component
화면의 영역을 구분하여 개발할 수 있는 vue의 기능
→ 재사용성이 올라가고 빠르게 화면 제작 가능
기본적으로 인스턴스를 하나 생성하면
컴포넌트로 생성된다.
전역 컴포넌트
- 플러그인이나 라이브러리로 전역으로 사용해야 하는 경우에 전역 컴포넌트 형식을 사용한다.
Vue.component('컴포넌트 이름', 컴포넌트 내용);
<div id="app">
<app-header></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
new Vue({
el: '#app'
});
</script>
지역 컴포넌트
- 특정 컴포넌트 하단에 작성, 즉 전역으로 접근되지 않는다.
- 특정 컴포넌트 하단의 여러 컴포넌트들을 속성을 통해 확인할 수 있다.
new Vue({
el: "#app",
components: {
"app-footer": {
template: "<footer>footer</footer>",
},
},
});
대부분 특별한 경우 아니고는 지역 컴포넌트를 생성해서 웹 구성
컴포넌트와 인스턴스의 관계
- 전역 컴포넌트는 기본적으로 생성한 모든 인스턴스에 등록된다.
- 지역 컴포넌트는 인스턴스마다 새로 생성해줘야 한다.
2. 컴포넌트 통신 방식
컴포넌트 통신
- 컴포넌트를 구분해서 생성하게 되면 컴포넌트들 간의 ‘관계’가 생성된다.
- 컴포넌트는 각각 데이터 유효 범위를 가진다. → 따라서 특정 규칙을 따라야 데이터 교환 가능
- 상위 → 하위로는 데이터를 내려준다 : props 속성
- 하위 → 상위로는 이벤트를 올려준다 : event 발생
왜 규칙이 필요할까?
- 특정 컴포넌트의 변화에 따라서 나머지 컴포넌트가 유기적으로 데이터를 주고 받았을 때, 데이터의 방향을 예측하기 어렵다.
- 특정 데이터가 바뀌었을 때 발생하는 버그를 찾고 고치기가 어렵다. (n방향 통신의 문제점 : MVC 페턴에서 자주 확인 가능)
props
- 상위에서 하위로 데이터를 내려준다.
<div id="app">
<app-header
v-bind:프롭스
속성
이름="상위 컴포넌트의 데이터 이름"
></app-header>
</div>
예시 코드
<body>
<div id="app">
<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>
컴포넌트(상위)의 데이터 속성 message 의 ‘hi’가 컴포넌트(하위)의 props 속성 propsdata에 내려온 것을 확인
props 특징
- 상위 컴포넌트의 데이터 속성 값이 바뀌면, 하위 컴포넌트의 props 값도 바뀐다. → Reactivity 적용
Event emit
- 하위에서 상위로 이벤트를 올려준다.
<div id="app">
<app-header
v-on:하위
컴포넌트에서
발생한
이벤트
이름="상위 컴포넌트 메서드 이름"
></app-header>
</div>
예시 코드
<body>
<div id="app">
<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>
하위 컴포넌트
의 event(name:pass)가 상위 컴포넌트 에서 발생되어 console.log가 찍히는 것 확인.
예시 코드2
<!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:pass="logText"></app-header>
<app-content v-on:plus="plusNum"></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('plus');
}
}
}
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
methods: {
logText : function() {
console.log('hi');
},
plusNum: function() {
this.num += 1;
console.log(this.num);
}
},
data: {
num:10
}
});
</script>
</body>
</html>
num을 하나씩 증가시키는 함수 plusNum 생성
(div#app data인 num은this.num으로 접근 가능)
app-content에서plus=”plusNum”을 사용하여 상위 컴포넌트로 이벤트 발생
댓글남기기