728x90
Vue.js 컴포넌트 개념 및 예제
컴포넌트를 사용하는 이유
<div id="app">
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
<div id="app-2">
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'Jang'
},
methods: {
changeText() {
this.name = 'Jang-change'
}
}
})
const app2 = new Vue({
el: '#app-2',
data: {
name: 'Jang'
},
methods: {
changeText() {
this.name = 'Jang-change'
}
}
})
</script>
위와 같이 코드가 똑같은 Vue 인스턴스 app, app2가 있다.
하지만 이런 방식으로 코드를 적는 것은 불필요한 중복에 불과하기 때문에 component를 사용해서 아래와 같이
개발을 할 수 있다.
component는 전역 component와 지역 component로 나뉜다.
전역 Component 사용법
반복해서 사용되어질 Vue 인스턴스에 new Vue({ }) 대신 Vue.component({ })를 사용한다.
컴포넌트의 이름을 넣는다. (아래 코드의 컴포넌트 명은 'app-button')
const app = new Vue({ // 반복되어 사용될 Vue 인스턴스
})
===========================================================================
Vue.component('app-button', { // 위의 코드를 component로 변환
});
반복해서 사용되어질 html 코드를 component 안의 template에 넣는다.
vue.js 3 미만에서는 template 안에 여러 개의 태그가 있으면 동작이 되지 않아 큰 태그로 묶어서 사용해야 한다.
여러 줄 일때는 ''(홑따옴표) 대신 ``(키보드에서 ~ 아래 기호)를 사용해야 한다.
<div id="app"> // 반복되어 사용될 Vue 인스턴스
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
===========================================================================
Vue.component('app-button', { // 위의 코드를 component로 변환
template:`
<div>
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
`
});
Vue 인스턴스의 data: { } 를 data() { }로 바꿔준다.
const app = new Vue({ // 반복되어 사용될 Vue 인스턴스
el: '#app',
data: {
name: 'Jang'
}
})
===========================================================================
Vue.component('app-button', { // 위의 코드를 component로 변환
data() {
return {
name: 'Jang'
}
}
});
반복하고 싶은 html 코드 자리에 위에서 만든 component를 사용한다.
<div id="app"> // 반복되어 사용될 Vue 인스턴스
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
<div id="app-2"> // 반복되어 사용될 Vue 인스턴스
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
===========================================================================
<div id="app"> // 위의 코드를 component로 변환
<app-button></app-button>
</div>
<div id="app-2"> // 위의 코드를 component로 변환
<app-button></app-button>
</div>
코드 - 전역 component 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 컴포넌트 사용하기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<app-button></app-button>
</div>
<hr>
<div id="app-2">
<app-button></app-button>
</div>
<script>
Vue.component('app-button', {
template:`
<div>
{{ name }}<br>
<button @click="changeText">Click!</button>
</div>
`,
data() {
return {
name: 'Jang'
}
},
methods: {
changeText() {
this.name = 'Jang-change'
}
}
});
</script>
</body>
</html>
실행 결과
코드 - component 안에서 다른 component 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 컴포넌트 사용하기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<app-button></app-button>
</div>
<hr>
<div id="app-2">
<app-button></app-button>
</div>
<script>
Vue.component('hello', { // component 생성
template: '<div>hello Vue!!</div>'
});
Vue.component('app-button', {
template:`
<div>
{{ name }}<br>
<hello></hello> // component 사용
</div>
`,
data() {
return {
name: 'Jang'
}
}
});
</script>
</body>
</html>
실행 결과
728x90
'개념정리 > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue Cli 설치하기 (2) | 2022.04.26 |
|---|---|
| [Vue.js] 여러 개의 Vue 인스턴스 사용하기 (2) | 2022.04.26 |
| [Vue.js] Vue v-for와 key 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue v-if와 v-show 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue 클래스와 스타일 바인딩 개념 및 예제 (1) | 2022.04.26 |
댓글