개발을 잘하고 싶은 개발자

[Vue] Vue Component의 등록 본문

카테고리 없음

[Vue] Vue Component의 등록

_소피아 2022. 1. 16. 15:21

**전역등록(Global Registration)**과 지역등록(Local Registration)

참고 https://kdydesign.github.io/2019/04/27/vue-component/

Vue를 제대로 익히지 않고 남발하면서 개발하면

이 언어를 사용하는 의미가 없어 하루하루 Vue를 개발하는 내내

내가 잘 사용하고 있는게 맞는지 의심이 든다ㅠ

그래서 오늘도 공부.

컴포넌트의 등록과 사용

컴포넌트의 등록에는 전역등록(Global Registration)과 지역등록(Local Registration)으로 나눌 수 있다.

1. 전역등록 (Global Registration)

컴포넌트 전역등록은 프로그래밍에서 전역 변수와 같은 의미이다. 인스턴스 생성 후 어느 페이지 또는 컴포넌트에서 사용할 수 있게 Global 하게 등록할 수 있다.

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import GlobalComponent from './components/global-component'

Vue.component(GlobalComponent.name, GlobalComponent)

new Vue({
  render: h => h(App),
}).$mount('#app')

위 소스처럼 GlobalComponent를 "main.js"에 선언해준다. 말 그대로 메.인.

2. 지역등록 (Local Registration)

지역등록은 전역등록 과는 다르게 생성된 컴포넌트는 사용될 곳에 바로 삽입하여 사용하면 된다.

App.vue

<template>
  <div id="app">
    <global-component></global-component>
    <local-component></local-component>
  </div>
</template>

<script>
  import LocalComponent from './components/local-component'

  export default {
    name: 'app',
    components: { LocalComponent }
  }
</script>

지역등록은 해당 template 파일아래 LocalComponent를 바로 선언해서 사용한다.