반응형
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
 
// 사용자 이벤트
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="counter-event-example">
            <p> {{ total }}</p>
            <my-component @increment="incrementTotal"></my-component>
            <my-component @increment="incrementTotal"></my-component>
        </div>
        
        <!-- 
            처음에는 my-component의 Vue 컴포넌트에서 template에 의해 button click이 일어나면 incrementCounter이 call 되고
 
            그 이후에 counter += 1이 되면서 this.$emit('increment')를 통해 increment를 call한다.
 
            이제 call을 받은 increment가 incrementTotal을 call하여 total값이 += 1이 된다.
         -->
        <script>
            Vue.component('my-component',{
                template: '<button @click="incrementCounter"> {{ counter }} </button>',
                data: function(){
                    return{
                        counter : 0
                    }
                },
                
                methods:{
                    incrementCounter: function(){
                        this.counter += 1
                        this.$emit('increment')
                    }
                },
            });
 
            new Vue({
                el: '#counter-event-example',
                data:{
                    total : 0
                },
                methods:{
                    incrementTotal: function(){
                        this.total += 1
                    }
                }
            });
        </script>
 
    </body>
</html>
 
cs


my-component는 template 내부에 있는 html로 구성되게 되고 incrementCounter 버튼을 클릭하면 increment 이벤트를 emit하게 된다.


이때 increment가 호출되면 incrementTotal을 호출하게 되어 this.total += 1이 실행되게 된다.


사용자 이벤트는 잘 알아두고 숙지하면 좋다.



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>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <my-component @click.native = "doTheThing"></my-component>
        </div>
 
        <script>
            Vue.component('my-component' ,{
                template: '<button>버튼</button>'
            });
 
            new Vue({
                el: '#app',
                methods:{
                    doTheThing: function(event){
                        console.log(event);
                    }
                }
            })
        </script>
 
    </body>
</html>
cs



v-on:click.native를 사용하고 디렉티브 값으로 doTheThing 메서드를 설정하여 .native 이벤트 수식어를 사용하여 


브라우저에 표시된 컴포넌트의 루트 엘리먼트에서 발생하는 DOM 이벤트를 Vue 컴포넌트의 상위 컴포넌트로 전달한다.





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
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <comp :foo.sync="bar"></comp>
        </div>
 
        <script>
        Vue.component('comp',{
            template: '<input @keyup="update" v-model="foo_internal">',
            props: ["foo"],
            data: function(){
                return{
                    "foo_internal": this.foo
                }
            },
            methods:{
                update: function(){
                    this.$emit("update:foo", this.foo_internal);
                }
            }
        });
 
        var vm = new Vue({
            el: '#app',
            data:{
                bar: "h12"
            }
        });
        </script>
    </body>
</html>
cs


Vue 컴포넌트는 루트 엘리먼트로 input을 사용, comp 컴포넌트 태그를 루트 인스턴스에서 사용한다.


컴포넌트의 input 엘리먼트는 v-on:keyup 이벤트 디렉티브와 v-model 디렉티브를 사용한다.


v-model 디렉티브는 prop 속성을 바로 사용하지 않고 컴포넌트 안에 있는 상태를 참조한다.


컴포넌트가 상위 컴포넌트 템플릿에서 사용될 때 루트 인스턴스에서 컴포넌트에 prop 속성으로 전달된 값을 this.foo 처럼 사용할 수 있다.






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

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

[VueJS] CSS와 Vue를 이용한 연습 프로그래밍  (0) 2018.08.13
[VueJS] vuex 이용 예제  (0) 2018.08.11
[VueJS] 컴포넌트, Props, 상위 하위 컴포넌트  (0) 2018.08.07
[VueJS] 다양한 엘리먼트 및 엘리먼트 수식어 예제  (2) 2018.08.05
[VueJS] Admin 페이지 예제 구현해보기  (0) 2018.08.03

티스토리툴바