[Vue.js] - Vue 컴포넌트 불러오는 방법 (import)

#Vue 컴포넌트란?

Vue 컴포넌트는 Vue.js 프레임워크에서 사용되는 재사용 가능한 UI 요소입니다. 컴포넌트는 독립적이고 재사용 가능한 코드 블록으로, 특정한 기능을 수행하고 화면에 표시될 수 있습니다. Vue 컴포넌트는 HTML, CSS 및 JavaScript로 구성되며, 재사용성과 모듈성을 제공하여 애플리케이션을 구성하는 데 도움을 줍니다.

Vue 컴포넌트는 Vue 인스턴스의 확장으로 생성됩니다. 각 컴포넌트는 자체적인 데이터, 메서드, 라이프사이클 훅(lifecycle hook) 등을 가질 수 있습니다. 컴포넌트의 데이터는 컴포넌트 내에서만 유효하며, 다른 컴포넌트와 독립적으로 상태를 관리할 수 있습니다.

컴포넌트는 Vue 애플리케이션에서 재사용 가능한 UI 조각을 만들기 위해 사용됩니다. 예를 들어, 버튼, 입력 폼, 모달 창 등의 UI 요소는 각각 독립적인 컴포넌트로 구성할 수 있습니다. 이렇게 구성된 컴포넌트는 필요한 곳에서 다시 사용되거나 조합하여 더 복잡한 UI를 만들 수 있습니다.

Vue 컴포넌트는 Vue.js의 핵심 개념 중 하나이며, 재사용성과 유지보수성을 높이는 데 큰 도움을 줍니다.

 

 

#Vue 컴포넌트 안에 다른 컴포넌트 사용하는 방법

 

-Vue.js 코드

-PageTitle.vue 컴포넌트

<template>
    <h2>컴포넌트 사용 테스트</h2>
</template>

 

-PageTitle.vue 컴포넌트를 사용할 다른 컴포넌트

1. import: import를 통해서 PageTile 컴포넌트를 가져옵니다.

2. componets: {}: 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 등록합니다.
3. <PageTitle />: html에서 import한 컴포넌트의 이름을 그대로 사용해서 태그를 만들면 됩니다.

<template>
    <div>
        <PageTitle />
    </div>
</template>
<script>
    import PageTitle from '../components/PageTitle';
    export default {
        components: {PageTitle}
    }
</script>

 

-Vue 컴포넌트 안에 다른 컴포넌트 사용 테스트