回答編集履歴
2
補足
test
CHANGED
|
@@ -8,6 +8,42 @@
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
+
わかりやすく出来てるページはここでした。
|
|
12
|
+
|
|
13
|
+
[https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860](https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
やるべきことはこうなります。
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
1. EventBusを宣言
|
|
22
|
+
|
|
23
|
+
2. ボタンを押すページ(bar)からEventBusのemit()を利用して呼び出したいイベントの名前を設定（キーです）
|
|
24
|
+
|
|
25
|
+
3. データを持って来たいページから（foo)EventBusのon()を利用し、実行したいイベントを紐づけする
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
jsfiddle(old) : [https://jsfiddle.net/yeondev/bq0fpL8j/](https://jsfiddle.net/yeondev/bq0fpL8j/)
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
jsfiddle(new) : [https://jsfiddle.net/yeondev/bq0fpL8j/9/](https://jsfiddle.net/yeondev/bq0fpL8j/9/)
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
■ 補足
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
上記のパターンは、AからBにデータを送ったり、トリガーを引いたりする仕組みです。
|
|
42
|
+
|
|
43
|
+
Aから変化を与えたBのデータを、Aからまた取得するにはデータをピンポンするようにやり取りする方法があります。
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
11
47
|
```typescript
|
|
12
48
|
|
|
13
49
|
// main.js
|
|
@@ -30,7 +66,7 @@
|
|
|
30
66
|
|
|
31
67
|
<form @submit.prevent="testFoo">
|
|
32
68
|
|
|
33
|
-
<input type="submit" value="fooButton">
|
|
69
|
+
<input type="submit" value="fooButton"> => {{ msg }}
|
|
34
70
|
|
|
35
71
|
</form>
|
|
36
72
|
|
|
@@ -50,7 +86,7 @@
|
|
|
50
86
|
|
|
51
87
|
return {
|
|
52
88
|
|
|
53
|
-
msg: 'fooですよ'
|
|
89
|
+
msg: 'default fooですよ'
|
|
54
90
|
|
|
55
91
|
}
|
|
56
92
|
|
|
@@ -60,17 +96,33 @@
|
|
|
60
96
|
|
|
61
97
|
testFoo: function () {
|
|
62
98
|
|
|
63
|
-
console.log('
|
|
99
|
+
console.log('順番3.Foo::testFoo() 開始')
|
|
64
|
-
|
|
100
|
+
|
|
65
|
-
console.log(this.msg)
|
|
101
|
+
console.log('順番3-1.Foo::testFoo() 変化する前のメッセージ=> ', this.msg)
|
|
102
|
+
|
|
66
|
-
|
|
103
|
+
this.msg = 'updated fooですよ'
|
|
104
|
+
|
|
105
|
+
console.log('順番3-2.Foo::testFoo() 変化する後のメッセージ=> ', this.msg)
|
|
106
|
+
|
|
107
|
+
console.log('順番3-3.Foo::testFoo() リターンせずMsgだけ変換したまま終了')
|
|
108
|
+
|
|
67
|
-
}
|
|
109
|
+
}
|
|
68
|
-
|
|
110
|
+
|
|
69
|
-
},
|
|
111
|
+
},
|
|
70
|
-
|
|
112
|
+
|
|
71
|
-
created () {
|
|
113
|
+
created () {
|
|
72
|
-
|
|
114
|
+
|
|
73
|
-
this.$EventBus.$on('callTestFoo',
|
|
115
|
+
this.$EventBus.$on('callTestFoo', () => {
|
|
116
|
+
|
|
117
|
+
console.log('順番2.Foo::EventBus:EventBus始動、Fooから何かの処理を行う（この場合testFoo）')
|
|
118
|
+
|
|
119
|
+
this.testFoo() // msgに何か変化を与えたい場合に使う関数
|
|
120
|
+
|
|
121
|
+
console.log('順番4.Foo::EventBus:msgをパラメータとしてBarの関数を呼び出す')
|
|
122
|
+
|
|
123
|
+
this.$EventBus.$emit('callTestBar', this.msg) // barにmsgを送る
|
|
124
|
+
|
|
125
|
+
})
|
|
74
126
|
|
|
75
127
|
}
|
|
76
128
|
|
|
@@ -80,11 +132,13 @@
|
|
|
80
132
|
|
|
81
133
|
|
|
82
134
|
|
|
135
|
+
|
|
136
|
+
|
|
83
137
|
```
|
|
84
138
|
|
|
85
139
|
|
|
86
140
|
|
|
87
|
-
```
|
|
141
|
+
```Typescript
|
|
88
142
|
|
|
89
143
|
//bar.vue
|
|
90
144
|
|
|
@@ -96,7 +150,7 @@
|
|
|
96
150
|
|
|
97
151
|
<form @submit.prevent="testBar">
|
|
98
152
|
|
|
99
|
-
<input type="submit" value="barButton">
|
|
153
|
+
<input type="submit" value="barButton"> => {{ barMsg }}
|
|
100
154
|
|
|
101
155
|
</form>
|
|
102
156
|
|
|
@@ -116,7 +170,17 @@
|
|
|
116
170
|
|
|
117
171
|
export default {
|
|
118
172
|
|
|
173
|
+
data () {
|
|
174
|
+
|
|
175
|
+
return {
|
|
176
|
+
|
|
177
|
+
barMsg: 'default barですよ'
|
|
178
|
+
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
},
|
|
182
|
+
|
|
119
|
-
components: {
|
|
183
|
+
components: {
|
|
120
184
|
|
|
121
185
|
foo,
|
|
122
186
|
|
|
@@ -126,15 +190,35 @@
|
|
|
126
190
|
|
|
127
191
|
methods: {
|
|
128
192
|
|
|
193
|
+
getValueFromFoo: function (value) {
|
|
194
|
+
|
|
195
|
+
console.log('順番6.Bar::getValueFrom:パラメータを受け取る')
|
|
196
|
+
|
|
197
|
+
this.barMsg = value
|
|
198
|
+
|
|
199
|
+
},
|
|
200
|
+
|
|
129
|
-
testBar: function () {
|
|
201
|
+
testBar: function () {
|
|
130
|
-
|
|
202
|
+
|
|
131
|
-
console.log('
|
|
203
|
+
console.log('順番1.Bar::testBar:パラメータなしでFooの関数を呼び出す')
|
|
204
|
+
|
|
205
|
+
this.$EventBus.$emit('callTestFoo')
|
|
132
206
|
|
|
133
207
|
// fooB.methods.testFoo()
|
|
134
208
|
|
|
135
|
-
this.$EventBus.$emit('callTestFoo') // 追加
|
|
136
|
-
|
|
137
|
-
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
},
|
|
212
|
+
|
|
213
|
+
created () {
|
|
214
|
+
|
|
215
|
+
this.$EventBus.$on('callTestBar', (parameterFromFoo) => {
|
|
216
|
+
|
|
217
|
+
console.log('順番5.Bar::EventBus:EventBus始動、getValueFromFoo関数を呼び出す。書かれてないがFooから貰ったパラメータが入ってる(getValueFromFoo(msg)みたいに）')
|
|
218
|
+
|
|
219
|
+
this.getValueFromFoo(parameterFromFoo)
|
|
220
|
+
|
|
221
|
+
}) // fooからmsgを貰い、getValueFromFooにパラメータとして渡す
|
|
138
222
|
|
|
139
223
|
}
|
|
140
224
|
|
|
@@ -142,36 +226,4 @@
|
|
|
142
226
|
|
|
143
227
|
</script>
|
|
144
228
|
|
|
145
|
-
|
|
146
|
-
|
|
147
229
|
```
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
わかりやすく出来てるページはここでした。
|
|
152
|
-
|
|
153
|
-
[https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860](https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860)
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
やるべきことはこうなります。
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
1. EventBusを宣言
|
|
162
|
-
|
|
163
|
-
2. ボタンを押すページ(bar)からEventBusのemit()を利用して呼び出したいイベントの名前を設定（キーです）
|
|
164
|
-
|
|
165
|
-
3. データを持って来たいページから（foo)EventBusのon()を利用し、実行したいイベントを紐づけする
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
jsfiddle : [https://jsfiddle.net/yeondev/bq0fpL8j/](https://jsfiddle.net/yeondev/bq0fpL8j/)
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
下記は動作確認ですー
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
1
jsfiddle 追加
test
CHANGED
|
@@ -166,6 +166,10 @@
|
|
|
166
166
|
|
|
167
167
|
|
|
168
168
|
|
|
169
|
+
jsfiddle : [https://jsfiddle.net/yeondev/bq0fpL8j/](https://jsfiddle.net/yeondev/bq0fpL8j/)
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
169
173
|
下記は動作確認ですー
|
|
170
174
|
|
|
171
175
|
|