반응형


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
 
// 전역 컴포넌트, 지역 컴포넌트
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app1">
            <my-component></my-component>
        </div>
    
        <div id = "app2">
            <my-component-child msg = "파라미터 전송"></my-component-child>
        </div>
                    
        <script>
            Vue.component('my-component',{
                template : '<div>전역 컴포넌트 </div>',
 
                data:{
                    msg : "부모 msg 변수"
                }
            });
            new Vue({
                el:'#app1',
            })
            
            var vm2 = new Vue({
                el : '#app2',
                components:{
                    
                    'my-component-child':{
                        props:['msg'],
                        template : '<div>지역 컴포넌트 {{ msg }} </div>'
                    },
 
                }
            });
        </script>
    </body>
</html>
cs


c++, java, python같은 곳들에는 함수를 콜할때 파라미터를 보내지만 여기서는 props라고 하면 자식이 받는 인자가 되고 상위 컴포넌트에서 파라미터를 보낼 수 있게 된다.


현재 my-component는 상위 컴포넌트(전역 컴포넌트)이고 my-component-child는 하위 컴포넌트이다.




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
50
51
52
53
54
55
 
 
// 특정 script 엘리먼트를 이용해 제약받지 않기
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <script id="tmp1", type="text/x-template">
            <table>
                <my-row>
                    <my-cell>123</my-cell>
                    <my-cell>456</my-cell>
                </my-row>
            </table>
        </script>
 
        <div id="example">
            <custom-table></custom-table>
        </div>
 
        <script>
            /*
                components에 custom-table의 지역 컴포넌트에 대한 설정을 해주는데
                template는 tmp1 id에 있는 것을 사용할 것이고
                거기에 존재하는 my-row, my-cell은 아래와 같이 설정할 것이다.
            */
            var vm = new Vue({
                el: '#example',
 
                components:{
                    'custom-table':{
                        template: '#tmp1',
                        'my-row':{
                            render: function(h){
                                return h("tr", this.$slots.default);
                            },
                            components:{
                                'my-cell':{
                                    render: function(h){
                                        return h("td", this.$slots.default);
                                    }
                                }
                            }
                        }
                    }
                }
            });
 
        </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
 
 
// props를 이용하여 컴포넌트 내부에 message, messages라는 값들을 가질 수 있음을 알려준다.
 
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <child message='one'></child>
            <child message='two'></child>
            <child message='three'></child>
            <child message= 'fofofo' messages='four'></child>
        </div>
 
        <script>
            Vue.component('child',{
                props: ['message','messages'],
                
                template: '<p> {{ message }} {{ messages }} </p>'
            });
 
            new Vue({
                el: '#app1'
            });
 
        </script>
    </body>
</html>
 
cs



파라미터를 여러개 보낼 수도 있다.


지금은 하나의 뷰에서 여러 뷰 컴포넌트를 쓰기에 props가 이해가 되지 않을 수 있지만, 뷰를 뷰 파일 단위로 나누게 될 때 props와 eventbus는 아주 중요한 요소가 된다.




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
// props 유효성 검사를 통해 검증 한 후 render 혹은 template로 표현 가능하다.
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component v-bind:prop-a="123" prop-b="B" v-bind:prop-c="coffee" v-bind:prop-d="hal_object" v-bind:prop-e="score" >  </my-component>
        </div>
 
        <script>
            Vue.component('my-component',{
                props:{
                    propA: Number,
                    propB: String,
                    propC: Boolean,
                    propD: Object,
                    propE: Array,
                },
 
                render: function(h){
                    var myRet = this.propA + ' ' + this.propB + ' ' + this.propC + ' ' + this.propD.hal + ' ' + this.propE[1];
                    return h('span', myRet);
                },
 
                // template: '<span>{{propA}}  {{propB}} {{propC}} {{propD.hal}} {{propE[1]}}</span>'
            });
 
            new Vue({
                el: '#app',
                data:{
                    coffee:true,
                    hal_object:{
                        hal: "hardware",
                    },
                    score: [10,20,30],
                }
            });
        </script>
 
    </body>
</html>
cs



props에서 유효성 검사가 가능하다.


지금은 이해가 잘 안되도 그대로 한번 따라적고 추후에 이런게 있었다는게 생각나도 좋다.





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
 
// props를 이용하여 propA를 검증할때 배열로도 검증이 가능하다(배열속에 있는 것 중 하나면 됨)
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component v-bind:prop-a="123"></my-component>
            <my-component v-bind:prop-a="false"></my-component>
        </div>
 
        <script>
            Vue.component('my-component',{
                props:{
                    propA: [Number, Boolean]
                },
                render: function(h){
                    return h('span', this.$slots.default);
                }
            });
 
            new Vue({
                el: '#app'
            });
 
        </script>
 
    </body>
</html>
 
cs


위의 주석에서 말하듯이 props를 이용하여 propA를 검증할때 배열속에 있는 것 중 하나면 유효성 검증이 된다.




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
 
// props에서 required가 true인 속성들은 항상 검증이 필요하다. 이때 v-bind:prop-a="123" 이것을 지우면 콘솔에 오류가 뜬다.
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component v-bind:prop-a="123"></my-component>
        </div>
 
        <script>
            Vue.component('my-component',{
                props:{
                    propA: {
                        type: Number,
                        required: true
                    }
                },
                render: function(h){
                    return h('span', this.$slots.default);
                }
            });
 
            new Vue({
                el: '#app'
            });
 
        </script>
 
    </body>
</html>
 
cs



위의 주석의 말처럼 required가 true라면 항상 검증이 필요하게 된다.





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
// Vue 컴포넌트에 prop 객체의 속성이 전달되지 않았을 때는 default 속성값을 prop 객체의 속성값으로 제공한다.
 
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component ></my-component>
            <br>
            <my-component v-bind:prop-c="40" v-bind:prop-d="40"></my-component>
        </div>
 
        <script>
            Vue.component('my-component',{
                props:{
                    propC: {
                        type: Number,
                        default: function(){
                            return 10;
                        }
                    },
 
                    propD: {
                        type: Number,
                        default: 20
                    },
                },
 
                render: function(h){
                    return h('div',[
                        h('span', 'prop-c / ' + this.propC),
                        h('br'),
                        h('span', 'prop-d / ' + this.propD),
                    ]);
                }
            });
 
            new Vue({
                el: '#app'
            });
        </script>
 
    </body>
</html>
cs



위의 주석대로 어떤 값도 전달되지 않았다면 default에 있는 값을 이용한다.


이때 아래에는 propC인데 위에서는 prop-c는 이유는 html에서는 케밥 표기법 (prop-c)로 써야하고 vue에서는 카멜 표기법(propC)를 써야하기 때문이다.






반응형
저작자표시 비영리 변경금지

'Basic > VueJS' 카테고리의 다른 글

[VueJS] vuex 이용 예제  (0) 2018.08.11
[VueJS] 사용자 이벤트  (0) 2018.08.09
[VueJS] 다양한 엘리먼트 및 엘리먼트 수식어 예제  (2) 2018.08.05
[VueJS] Admin 페이지 예제 구현해보기  (0) 2018.08.03
[VueJS] 할일 리스트 구현  (4) 2018.08.02

티스토리툴바