[Vue.js] 컴포넌트 선언 방법 - 2가지 방법

컴포넌트를 등록하고 사용하기 - 2가지 방법

1. 하나의 파일에서 컴포넌트 선언하는 방법

2. 전역에서 컴포넌트를 사용할 수 있도록 선언해주는 방법

 

 

방법 1: 하나의 파일에서 컴포넌트를 선언하는 방법

Given..) App.vue파일에서 Home.vue 파일 사용하고자 함.

 

* App.vue ↓

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ count }}</p>
    <button @click="count ++">추가</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        title: "안녕하세용.",
        count: 1
      }
    }
  }
</script>

 

* Home.vue ↓(App.vue파일과 동일 depth에서 생성)

<template>
  <div>
    <h1>{{ homeTitle }}</h1>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        homeTitle: "홈"
      }
    }
  }
</script>

 

After...) App.vue ↓

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ count }}</p>
    <button @click="count ++">추가</button>
    <HomeComponent></HomeComponent>
  </div>
</template>

<script>
  import HomeComponent from './Home.vue'

  export default {
    components: {
      HomeComponent
    },
    data () {
      return {
        title: "안녕하세용.",
        count: 1
      }
    }
  }
</script>

 

=> 코드 설명:

import : 외부에 만들어져 있는 Vue파일을 안에 가져올 때

HomeComponent: 파일명과 동일하지 않아도 된다.

from './Home.vue': 상대위치이며, App.vue와 동등한 depth에 있는 Home.vue파일을 불러오는 거라 './Home.vue'로 작성하였고, '.vue'는 생략이 가능하다.

  import HomeComponent from './Home.vue'
  or...
  import HomeComponent from './Home'

 

 

=> home component 가져오기 성공!!

 

이렇게 home component를 가져는 왔는데 template안에서 사용하려면..?

 

export default 문 안에서 이건 컴포넌트야 라고 선언해주고,  template에도 추가해줘야 한다.

 

↓ 이렇게! (최종 App.vue)

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ count }}</p>
    <button @click="count ++">추가</button>
    <HomeComponent></HomeComponent>
  </div>
</template>

<script>
  import HomeComponent from './Home.vue'

  export default {
    components: {
      HomeComponent // import 할 때 지정해줬던 component명 그대로!
    },
    data () {
      return {
        title: "안녕하세용.",
        count: 1
      }
    }
  }
</script>

 

출력 결과물 확인하기 ↓

 

방법 2: 전역에서 컴포넌트를 사용할 수 있도록 선언해주는 방법

=> Main.vue에 해당 컴포넌트(재사용성이 높은)를 전역으로 선언하여 사용하면 된다.

Given..) App.vue파일에서 Status.vue파일 사용하고자 함. + Status.vue 파일은 App.vue가 아닌 다른 파일에서도 재사용성↑ ex) Footer, Nav etc

 

* Status.vue ↓

<template>
    <h2>{{ title }}</h2>
  </template>

<script>
  export default {
    data () {
      return {
        title: "상태 좋습니다."
      }
    }
  }
  </script>

 

* Main.vue ↓

import StatusComponents from './Status.vue'

Vue.component('AppStatus', StatusComponents)

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

=> 코드 설명:

Vue.component('컴포넌트명', 옵션)

- 컴포넌트명: 직접 지정

- 옵션 : import 할 때 지정해줬던 component명

 

* App.vue ↓

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ count }}</p>
    <button @click="count ++">추가</button>
    <HomeComponent></HomeComponent>
    <AppStatus></AppStatus>
    
  </div>
</template>

<script>
  import HomeComponent from './Home.vue'

  export default {
    components: {
      HomeComponent // import 할 때 지정해줬던 component명 그대로!
    },
    data () {
      return {
        title: "안녕하세용.",
        count: 1
      }
    }
  }
</script>

 

출력 결과물 확인하기 ↓

 

 

 

즉!

컴포넌트를 등록하고 사용하기에는 2가지 방식이 있고,

재사용 가능성이 낮다 ? → 1. 하나의 파일에서 컴포넌트 선언하는 방법

재사용 가능성이 높다 ? → 2. 전역에서 컴포넌트를 사용할 수 있도록 선언해주는 방법