컴포넌트
  • Template을 보완하여 만든 요소다.
  • Template은 순수 HTML코드만을 가지고 있지만 Component는 HTML템플릿과 더불어 데이터 셋팅, 함수 정의 등 다양한 작업을 할 수 있다.
  • Component는 Vue.js의 핵심 요소이다.
  • 재사용이 가능하다.
  • 여러개의 Component 사용이 가능하다.
  • data는 무조건 함수로 정의해야 된다.
  • Vue.js 에서 제공하는 컴포넌트를 이용해 다양한 템플릿을 만들어 사용할 수 있다.


전역 컴포넌트
전역 컴포넌트 등록 형식
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
<script src="https://unpkg.com/vue"></script>
<script>
    Vue.component('컴포넌트 이름', {
        //컴포넌트 내용
    });
</script>
</body>
</html>
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app">
        <button>컴포넌트 등록</button>
        <my-component></my-component>                                
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
    Vue.component('my-component', {
        template: '<div>전역 컴포넌트가 등록되었습니다.</div>'
    });
 
    new Vue({
        el : '#app'
    });
</script>
</body>
</html>
cs

결과



지역컴포넌트

지역 컴포넌트 등록은 전역 컴포넌트 등록과는 다르게 인스턴스에 components속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.

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
27
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app">
        <button>지역 컴포넌트</button>
        <my-local-component></my-local-component>                                
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
    var cmp = {
        //컴포넌트 내용
        template : '<div>지역 컴포넌트가 등록되었습니다.!</div>'
    };
 
    new Vue({
        el : '#app',
        components: {
            'my-local-component' : cmp
        }
    });
</script>
</body>
</html>
cs



컴포넌트 2개 이상도 가능



전역컴포넌트와 지역컴포넌트


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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
    <div id="app">
        <h3>첫 번째 인스턴스 영역</h3>
        <my-global-component></my-global-component>
        <my-local-component></my-local-component>
    </div>
 
    <hr>
 
    <div id="app2">
        <h3>두 번째 인스턴스 영역</h3>    
        <my-global-component></my-global-component>
        <my-local-component></my-local-component>
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
    // 전역 컴포넌트 등록
    Vue.component('my-global-component', {
        template: '<div>전역 컴포넌트 입니다.</div>'
    });
 
    // 지역 컴포넌트 내용
    var cmp = {
        template: '<div>지역 컴포넌트 입니다.</div>'
    };
 
    new Vue({
        el: '#app',
        //지역 컴포넌트 등록
        components: {
            'my-local-component' : cmp
        }
    });
 
    //두번째 인스턴스 영역
    new Vue({
        el : '#app2'
    });
    
</script>
</body>
</html>
cs

결과



태그가 2개 이상인 경우 에러가 발생한다.

1
2
3
4
    Vue.component('component1',{
        template : '<h3>첫 번째 h3태그 입니다. </h3>'
                    +'<h3>두 번째 h3태그 입니다.</h3>'
    })
cs



<div>로 감싸야 출력이 된다.

1
2
3
4
5
6
    Vue.component('component1',{
        template : '<div>'
                    +'<h3>첫 번째 h3태그 입니다. </h3>'
                    +'<h3>두 번째 h3태그 입니다.</h3>'
                    +'</div>'
    })
cs




재사용이 가능하다.



데이터를 사용하는 템플릿

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
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
    <div id="test4">
        <data_component></data_component>
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
 
    Vue.component('data_component',{
        template : '<div>'
                    +'<h3>데이터를 사용하는 템플릿</h3>'
                    +'<h3>{{ a1 }}</h3>'
                    +'</div>',
                    data : function() {
                        return {
                            a1 : '문자열1'
                        }
                    }
    })
 
 
 
    var test4 = new Vue({
        el : '#test4'
    });
 
</script>
</body>
</html>
cs


함수를 호출하는 템플릿

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
    <div id="test4">
        <data_component></data_component>
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
 
    Vue.component('data_component',{
        template : '<div>'
                    +'<h3>데이터를 사용하는 템플릿</h3>'
                    +'<h3>{{ a1 }}</h3>'
                    +'<h3>{{ a2 }}</h3>'
                    +'<h3>{{ test_method1() }}</h3>'
                    +'</div>',
                    data : function() {
                        return {
                            a1 : '문자열1',
                            a2 : '문자열2'
                        }
                    },
                    methods : {
                        test_method1 : function(){
                            return '메서드 호출'
                        }
                    }
    })
 
 
 
    var test4 = new Vue({
        el : '#test4'
    });
 
</script>
</body>
</html>
cs



동적으로 사용하는 템플릿

a1 값에 따라 동적으로 불러올 수가 있다,

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
 
    <div id="test5">
        <component v-bind:is='view1'></component>
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
 
    var a1 = 10
 
    new Vue({
        el : '#test5',
 
            components : {
                'component5' : {
                    template : '<h3>여섯 번째 h3태그입니다. </h3>'
                },
                'component6' : {
                    template : '<h3>일곱 번째 h3태그입니다. </h3>'
                }
            },
 
            data : function(){
                if(a1 == 0){
                    return{
                        view1 : 'component5'
                    }
                }else{
                    return{
                        view1 : 'component6'
                    }
                }
 
            }
        
    });
 
</script>
</body>
</html>
cs


저작자표시

'Vue' 카테고리의 다른 글

Watch  (0) 2019.07.31
v-html, v-bind  (0) 2019.07.30
라이프 사이클  (0) 2019.07.30
CDN으로 Vue 사용하기, 인스턴스 만들기 연습  (0) 2019.07.29
Vue.js 소개, 공부, 정리  (0) 2019.07.29

+ Recent posts

티스토리툴바