SONG's 개발새발

8. Vue CLI Component

2019-04-19

Vue CLI Component

1. CLI Component 등록 방법 : 지역 component 등록

  1. 새로운 파일 추가 (Home.vue)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div>
        <h1>{{ homeTitle }}</h1>
    </div>
</template>


<script>
    export default{
        data () {
            return {
                homeTitle : '홈 입니다.'
            }
        }
    }
</script>
  1. Vue.app
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
    <div>
        <h1>{{ title }}</h1>
        <HomeComponent></HomeComponent>
    </div>
</template>


<script>
        // 컴포넌트명'HomeComponent' : Vue.app에서 사용할 이름
    import HomeComponent from './Home.vue'


    export default{
            // HomeComponent를 갖고온 후 이것을 사용하기 위해서 이것은 컴포넌트야라는 선언이 필요!
        components : {
            HomeComponent
        },

        data () {
            return {
                title : 'Vue 최종 껍데기'
            }
        }
    }
</script>

2. CLI Component 등록 방법 : 전역 component 등록

  • 전역 Component의 사용 : footer나 navigation 부분 등 공통적으로 여러 파일에 넣어줘야 할 때, 일일이 import를 작성하기 번거롭기 때문에 전역으로 한번만 등록
  1. 새로운 파일 추가 (Home.vue)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <div>
        <h1>{{ title }}</h1>
        <AppHome></AppHome>
    </div>
</template>


<script>
export default{
    data () {
        return {
            title : 'Vue 최종 껍데기'
        }
    }
}
</script>
  1. main.js
  • main.js : 어플리케이션을 관장(책임자)해주는 역할
  • main.js에 전역으로 컴포넌트를 만들어주면 모든 파일에서 <AppHome></AppHome>만 추가해주면 컴포넌트 사용이 가능하다.
1
2
3
4
5
import HomeComponent from "./Home.vue";

Vue.component("AppHome", HomeComponent);

new Vue({});
Tags: Vue
← 7. Vue CLI 0420 study →