[Vue] 컴포넌트

kante·2020년 12월 23일
0

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에서 선언해줬던 것으로 사용하면 된다.


참조

  1. https://kr.vuejs.org/v2/guide/components.html
profile
경험많은 개발자가 되자

0개의 댓글