[Vue.js] Global Component 만들기 (컴포넌트 전역 등록하기)

[Vue.js] Global Component 만들기 (컴포넌트 전역 등록하기)

---

 

들어가기에 앞서...

매번 자주 사용하는 컴포넌트를 만들고, 매번 해당 컴포넌트를 사용하는 곳마다 import 하여 사용하는 것은 불편할 뿐더러 컴포넌트의 파일 위치가 바뀐다면 해당 컴포넌트를 사용하는 모든 파일마다 수정을 해줘야 하기 때문에 좋지 않다.

그렇기 때문에 자주 사용하는 컴포넌트를 전역(Global)로 등록하여 사용한다.

 

🎈 간단한 글로벌 버튼 컴포넌트 만들기

`버튼` 컴포넌트를 이용해서 전역 컴포넌트 생성 방법에 대해 설명한다.

Vuetify 라는 UI Framework를 이용해서 버튼(v-btn)을 생성하였다.

 

 

1. 버튼 컴포넌트 생성

`버튼`을 컴포넌트로 만들었다.

$attrs는 부모로 부터 전달받은 props 를 모두 담고 있으며, $listeners는 부모로 부터 전달받은 이벤트 리스너들을 모두 담고 있다.

- [참고] $listeners 관련 문서

// @/components/GlobalButton.vue
<template>
  <v-btn depressed v-bind="$attrs" v-on="$listeners">
    <slot></slot>
  </v-btn>
</template>

<script>
export default {
  name: "GlobalButton",
};
</script>

 

2. 컴포넌트 정의

@/plugins/global-components.js 파일을 만들어서 그 안에 정의한 후 main.js에 등록한다.

• 파일을 분리하지 않고 처음부터 main.js 에 바로 등록해도 상관 없지만, 전역으로 등록하려는 컴포넌트가 많아 질 경우 main.js 파일이 복잡해 질 수 있으므로 분리하는 것이 좋다.
• 꼭 plugins 폴더 내에 생성해줄 필요는 없다.

 

💡 Vue.component

• 첫번째 인자: 컴포넌트 이름
• 두번째 인자: 컴포넌트

- [참고] Vue.component 관련 문서

// @/plugins/global-components.js
import Vue from "vue";
import GlobalButton from "@/components/GlobalButton.vue";

Vue.component("g-button", GlobalButton);

main.js 에 플러그인 추가 

// main.js
import Vue from "vue";
import App from "./App.vue";
import "@/plugins/global-components";  // 추가

Vue.config.productionTip = false;

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

 

3. 컴포넌트 사용

(1)은 전역에 등록했기 때문에 따로 파일 내에서 import 하고 components에 등록할 필요 없이 사용하면 된다.

(2)는 전역 컴포넌트가 아니기 때문에 스크립트 내에서 component 등록을 해줘야 한다.

// App.vue
<template>
  <div id="app">
    <g-button outlined>Global Button</g-button>  // (1)
    <my-button>My Button</my-button>             // (2)
  </div>
</template>

<script>
import MyButton from "@/components/MyButton.vue";

export default {
  name: "App",
  components: { MyButton },
};
</script>

<style>
button {
  margin: 5px;
}
</style>

 

4. 결과

전체적인 코드 👉 https://codesandbox.io/s/small-architecture-7o4cn?file=/src/App.vue

 

 

 

 

 

---

[참고] https://kr.vuejs.org/v2/guide/components-registration.html