반응형

부모 자식 관계가 없는 두 컴포넌트 통신을 위해


EventBus라는 Vue를 생성 후 SenderApp와 RecevierApp이 통신하는 과정이다.


사실 이 코드는 의미없는 코드이다. 이벤트 버스를 이해했다면 이 코드가 왜 의미없는 코드인지 생각해보자. 


이벤트 버스에 대한 설명은 시중에 잘 없다.


EventBus.$emit('핸들러', 파라미터)

EventBus.$on('핸들러', 함수)


위의 두개를 이제 이벤트로 이용할 것인데


우선 받는 입장에서는 eventbus.$on을 이용하여 해당하는 핸들러를 on시키고 그 핸들러로 들어온 값을 어디로 보낼지 함수를 지정해야한다.


그다음 보내는 입장에서 eventbus.$emit를 통해 해당 핸들러로 파라미터들을 보내면 $on에 있던 핸들러가 값을 발견하고 해당 함수로 보내는 과정을 거치게 되는 것이다.


아래의 코드를 보고 직접 수정해보는 과정을 거쳐보자


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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <style>
            .title{
                text-align:center; 
                font-size : 20px;
            }
            .contents{
                background-color:rgb(202, 198, 198); 
                width : 50%; 
                height : 600px;
                float : left;
                text-align: center;
            }
            .userinput{
                background-color:bisque;
                width : 50%;
                height : 600px;
                float : right;
                text-align : center;
            }
        </style>
        <p class="title"> 유저 목록 </p>
 
        <div id="sender-app" class ="userinput">
            <p>#sender-app: I sent a message a</p>
            <template v-if="sentText">
                <p> {{ sentText }} </p>
            </template>
            <input v-model = "addData[0]" placeholder ="아이디" @keyup.enter="sendAdd">
            <input v-model = "addData[1]" placeholder ="이름" @keyup.enter="sendAdd">
            <input v-model = "addData[2]" placeholder ="주소" @keyup.enter="sendAdd">
            <button @click="sendAdd"> 추가 </button>
 
            <br><br>
            <input v-model = "deleteData[0]" placeholder ="아이디" @keyup.enter="sendDelete">
            <input v-model = "deleteData[1]" placeholder ="이름" @keyup.enter="sendDelete">
            <input v-model = "deleteData[2]" placeholder ="주소" @keyup.enter="sendDelete">
            <button @click="sendDelete"> 삭제 </button>
 
            <br><br>
            <input v-model = "findData[0]" placeholder ="아이디" @keyup.enter="sendFind">
            <input v-model = "findData[1]" placeholder ="이름" @keyup.enter="sendFind">
            <input v-model = "findData[2]" placeholder ="주소" @keyup.enter="sendFind">
            <button @click="sendFind"> 검색 </button> 
            <p v-for="value, i in findList"> {{ i }} : {{ value }} </p>
        </div>
 
        <div id="receiver-app" class ="contents">
            <p>#receiver-app:</p>
            <template v-if="receivedText">
                <p> {{ receivedText }} </p>
            </template>
            
            <br><br>
            <input v-model = "filterData" placeholder ="필터링">
            <div style="background-color:chartreuse;" v-show="filterData !== ''">
                <p v-for="i in list" v-if="JSON.stringify(i).includes(filterData)"> {{ i }} </p>
            </div>
            <p v-for="value, i in list"> {{ i }} : {{ value }}</p>
        </div>
 
        <script>            
            var EventBus = new Vue();
            
            var SenderApp = new Vue({
                el : '#sender-app',
                data:{
                    addData:[],
                    deleteData:[],
                    findData:[],
                    searchData:[],
 
                    sentText: '',
                    
                    findList:[],
                },
                created(){
                    EventBus.$on('add', this.fromSender);
                    EventBus.$on('delete', this.fromSender);
                    EventBus.$on('find', this.fromSender);
                    EventBus.$on('getFind', this.fromReceiver);
                },
                methods:{
                    sendAdd(){
                        EventBus.$emit('add', 'add', [this.addData[0], this.addData[1], this.addData[2]]);
                        this.addData = [];
                    },
                    sendDelete(){
                        EventBus.$emit('delete', 'delete', [this.deleteData[0], this.deleteData[1], this.deleteData[2]]);
                        this.deleteData = [];
                    },
                    sendFind(){
                        EventBus.$emit('find', 'find', [this.findData[0], this.findData[1], this.findData[2]]);
                    },
 
                    fromSender(value, text){
                        this.sentText = text;
                        console.log("send :: %s",value);
                    },
                    
                    fromReceiver(value, text){
                        this.findList = [];
 
                        if(value === "getFind" && text.length){
                            this.findList = text;
                            console.log("findlist : %s",this.findList);
                        }
                    }
                }
            })
 
            var ReceiverApp = new Vue({
                el: '#receiver-app',
                data:{
                    receivedText: '',
                    filterData:'',
                    list:[]
                },
 
                created(){
                    EventBus.$on('add',this.fromSender);
                    EventBus.$on('delete', this.fromSender);
                    EventBus.$on('find', this.fromSender);
                    EventBus.$on('getFind', this.fromReceiver);
                },
 
                methods:{
                    fromSender(value, text){
                        this.receivedText = text;
 
                        if(value === "add"){
                            this.list.push(text);
                        }
                        else if(value === "delete"){
                            var jsonText = JSON.stringify(text);
 
                            for(var i = 0; i < this.list.length; i++){
                                var jsonList = JSON.stringify(this.list[i]);
 
                                if(jsonList === jsonText){
                                    this.list.splice(i,i+1);
                                    break;
                                }
                            }
                        }
                        else if(value === "find"){
                            var jsonText = JSON.stringify(text);
                            var ret = [];
 
                            for(var i = 0; i < this.list.length; i++){
                                var jsonList = JSON.stringify(this.list[i]);
 
                                if(jsonList === jsonText)
                                    ret.push(this.list[i]);
                            }
                            
                            EventBus.$emit('getFind', 'getFind', ret);
                        }
                    },
 
                    fromReceiver(value, text){
 
                    }
                }
            });
 
        </script>
    </body>
</html>
cs







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

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

[VueJS] Admin 페이지 예제 구현해보기  (0) 2018.08.03
[VueJS] 할일 리스트 구현  (4) 2018.08.02
[VueJS] 키보드 및 마우스를 이용한 이벤트 동작  (0) 2018.07.28
[VueJS] v-on 디렉티브를 이용한 다양한 기능 사용하기  (0) 2018.07.26
[VueJS] vue에서의 css 관리(v-bind)  (0) 2018.07.24

티스토리툴바