반응형



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
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="sender-app">
            <input v-model = "text">
            <button @click="sender">sender</button>
            <div v-if="sentText">#sender-app: I sent a message a  {{ sentText }}</div>
        </div>
 
        <div id="receiver-app">
            <div v-if="receivedText">#receiver-app: {{ receivedText }} </div>
        </div>
 
        <script>            
            var EventBus = new Vue();
            
            var SenderApp = new Vue({
                el : '#sender-app',
                data(){
                    return{
                        text : '',
                        sentText : ''
                    }
                },
                created(){
                    EventBus.$on('message', this.onReceive);
                },
                methods:{
                    sender(){
                        EventBus.$emit('message', this.text);
                       // this.text = '';
                    },
 
                    onReceive(text){
                        this.sentText = text;
                    }
                }
            })
 
            var ReceiverApp = new Vue({
                el: '#receiver-app',
                data(){
                    return{
                        receivedText: ''
                    }
                },
 
                created(){
                    EventBus.$on('message',this.onReceive);
                },
 
                methods:{
                    onReceive(text){
                        this.receivedText = text;
                    }
                    
                }
            });
 
        </script>
    </body>
</html>
 
cs


우선 sender-app과 receiver-app이 나뉘어있고 서로 컴포넌트 내부에서 생성자 역할을 하는 created를 통해 버스를 구축한다.


이때 EventBus.$on('message', this.onReceive)의 의미는 message라는 이름으로 핸들을 생성하고 message통로로 인해 전달받은 this.onReceive의 값을 인자로 쓰겠다는 의미이다.


그 후 sender는 EventBus.$emit를 통해 message 통로로 this.text를 보내게 되고 receiverApp과 senderApp은 서로 message 통로에 


onReceive가 왔으니 그 값을 받아내어 출력하게 되는 것이다.


추후 버스를 이용하여 sender는 User, receiver은 Database라고 생각하여 코딩한 것을 올리고자 한다.







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

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

[VueJS] v-if 디렉티브 및 v-show 디렉티브  (0) 2018.07.20
[VueJS] v-for 디렉티브 및 정렬 방법  (0) 2018.07.18
[VueJS] 필터를 이용한 문자열 응용  (0) 2018.07.16
[VueJS] 머스태시 문법 및 필터 적용  (0) 2018.07.14
[VueJS] 데이터 바인딩 및 폼 입력 바인딩  (2) 2018.07.10

티스토리툴바