반응형
- 전에 만들었던 더하기 문제 맞추기 예시를 활용해 컴포넌트에 대해 정리
컴포넌트란?
- 화면의 영역을 분리하여 개발하는 것
- 컴포넌트를 사용함으로써 코드를 재사용하기 편해짐
예제
- 전에 만들었던 더하기 문제 맞추기 예제를 (서로다른)두 개 만든다고 생각해보자
- 이 때 생각할 수 있는 방법은 2가지 있는데,
<div id="test">
<div>{{num1}} + {{num2}} = ?</div>
<input type="number" v-model="input">
<button v-on:click="SubmitForm">입력</button>
<div>{{result}}</div>
<div>{{num1}} + {{num2}} = ?</div>
<input type="number" v-model="input">
<button v-on:click="SubmitForm">입력</button>
<div>{{result}}</div>
</div>- 첫번째 방법은 다음과 같이 2번 써주는 것
- 이 때의 결과는 아래와 같이 두개가 같은 data와 methods를 공유함
- 두번째 방법은 div를 하나 더 만들고 id를 test가 아닌 다른 id로 설정해 주는 것
- 이 방법은 제대로 동작은 하지만 코드를 2번씩 써줘야 되기 때문에 코드가 너무 길어짐
- 이를 해결하기 위해 컴포넌트 사용
전역 컴포넌트
<body>
<div id="test">
<plus_test></plus_test>
<plus_test></plus_test>
</div>
</body>
<script>
Vue.component('plus_test', {
template: `
<div>
<div>{{num1}} + {{num2}} = ?</div>
<form v-on:submit="SubmitForm">
<input type="number" v-model="input"/>
<button type="submit">입력</button>
<div>{{result}}</div>
</form>
</div>
`,
data() {
return {
num1: Math.ceil(Math.random()*10 ),
num2: Math.ceil(Math.random()*10 ) ,
input: '',
result: '',
};
},
methods: {
SubmitForm(event){
event.preventDefault();
if(this.num1 + this.num2 == this.input){
this.result="정답";
this.num1 = Math.ceil(Math.random()*10 );
this.num2 = Math.ceil(Math.random()*10 );
this.input = '';
} else{
this.input = '';
this.result = "오답";
}
},
},
});
</script>
<script>
new Vue({
el: "#test",
});
</script>- 다음 코드와 같이 'plus_test'라는 컴포넌트를 생성하고, HTML 부분에서는 컴포넌트를 불러주기만 함
- <plus_test></plus_test>를 2번 해줌으로서 컴포넌트를 2개 생성했다고 보면 됨
- 이 때 중요한 점은 두 컴포넌트들이 서로 data와 methods를 공유하지 않는다는 것
- template 부분 작성시 주의해야 할 점 : 가장 상위 태그가 여러개 있으면 안됨
- 원래 코드에서는 div와 form이 가장 상위 태그였는데 수정한 코드에서는 div를 하나 더 만들어서 가장 상위 태그를 하나로 해줌
- 결과는 다음과 같이 2개가 생성되지만, 서로 따로 동작함을 확인할 수 있음
지역 컴포넌트
- 지역 컴포넌트는 다음과 같은 형태로 Vue 인스턴스 안에 컴포넌트를 선언해주면 됨.
<script>
new Vue({
el: "#test",
components: {
'plus_test': {
template: `
`,
data() {
return {
};
},
methods: {
},
}
}
});
</script>반응형
'Vue.js' 카테고리의 다른 글
| [Vue.js] v-for(index), 배열 (0) | 2021.08.22 |
|---|---|
| [Vue.js] props속성, v-bind, camelCase, kebab-case (0) | 2021.08.21 |
| [Vue.js] v-model, v-on:submit, 랜덤숫자생성, event.preventDefault() (0) | 2021.08.20 |
| [Vue.js] v-if, v-else, v-else-if, v-on:click (0) | 2021.08.19 |
| [Vue.js] 인스턴스, 속성(el, data, methods) (0) | 2021.08.19 |