2020 12 15
Vue 프론트엔드를 작업하다가 컴포넌트화를 시켜야 할 필요성을 느껴서 공부를 하려고 한다. React는 컴포넌트를 만들고 컴포넌트별로 관리하기 편리했었는데 Vue는 어떤지 잘 몰라서 공부를 한 번 해 보았다.
Vue에서 컴포넌트는 재사용 가능한 코드를 캡슐화 하는데 사용된다. HTML 엘리먼트로 나타날 수도 있다.
new Vue({
el: '#some-element',
// 옵션
})
이렇게 새 Vue 인스턴스를 만들 수 있다.
전역 컴포넌트를 등록하려면, Vue.component(tagName, options)
로 정의를 해 주면 된다.
Vue.component('my-component', {
// 옵션
})
그리고 템플릿에서
<my-component></my-component>
형태로 사용하면 된다.
전역으로 말고 Local 로 등록을 하려면 components 인스턴스 옵션으로 등록하면 된다.
var Child = {
template: '<div>사용자 정의 컴포넌트</div>'
}
new Vue({
// ...
components: {
'my-component': Child
}
})
리액트처럼 컴포넌트를 관리하고 싶었다. 그 방법은 다음과 같다.
먼저 component를 한 개 만든다.
// Example.vue
<template>
<div>
<h1>
Hello World!</h1>
</div>
</template>
<script>
import Vue from "vue";
export default{
name: 'example-vue',
data() {
},
methods: {
}
}
</script>
<style scoped>
</style>
그리고 main.js
파일에서 등록을 해 준다.
...
import Example from './components/Example'
Vue.component(Example.name, Example)
...
Vue에서 binding을 해 주고 나면, App.vue에서 사용을 할 수도, 다른 vue파일에서 사용을 할 수도 있다. 사용법은
<example-vue>example</example-vue>
형태로, 위에 name에서 선언해줬던 것으로 사용하면 된다.