teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

整形

2017/08/25 13:54

投稿

pulse
pulse

スコア17

answer CHANGED
@@ -21,26 +21,26 @@
21
21
 
22
22
  Object.defineProperties(Vue.prototype, {
23
23
  $bus: {
24
- get: function () {
24
+ get() {
25
25
  return EventBus
26
26
  }
27
27
  }
28
28
  }
29
29
 
30
30
  let ComponentY = Vue.extend({
31
- mounted: function(){
31
+ mounted(){
32
32
  this.$bus.$on('onMountedX', () => {
33
33
  console.log('onMountedX')
34
34
  })
35
35
  }
36
- });
36
+ })
37
37
 
38
38
  let ComponentX = Vue.extend({
39
- mounted: function(){
39
+ mounted(){
40
40
  this.$bus.$emit('onMountedX')
41
41
  }
42
42
  components: [ComponentY]
43
- });
43
+ })
44
44
  ```
45
45
 
46
46
  ただし、より大規模なものを作る場合はvuexみたいなものでステート管理を行うのが良いです。

1

途中で送信したため、再編集

2017/08/25 13:54

投稿

pulse
pulse

スコア17

answer CHANGED
@@ -5,4 +5,42 @@
5
5
 
6
6
  > しかし、はっきりと定義されたインタフェースを経由して、親と子を可能な限り分離されたものとしておくこともまた、とても大切です。これにより、各々のコンポーネントのコードは比較的独立した状態で書かれ判断されることが保証されます。それゆえ、コンポーネントを、よりメンテナンス可能で潜在的に再利用可能にできます
7
7
 
8
- したがって、
8
+ したがって、基本的には
9
+ - 子から親は $emit
10
+ - 親から子は props
11
+
12
+ でデータを受け渡すのが良いかもしれません。
13
+
14
+ ただ、propsでは直接的に子コンポーネントのメソッドを呼び出すことはできません。
15
+ したがって、コンポーネント間の処理の連携には下記のようにEventBusを使う手段があります。
16
+
17
+ [親子間以外の通信](https://jp.vuejs.org/v2/guide/components.html#親子間以外の通信)
18
+
19
+ ```
20
+ var EventBus = new Vue()
21
+
22
+ Object.defineProperties(Vue.prototype, {
23
+ $bus: {
24
+ get: function () {
25
+ return EventBus
26
+ }
27
+ }
28
+ }
29
+
30
+ let ComponentY = Vue.extend({
31
+ mounted: function(){
32
+ this.$bus.$on('onMountedX', () => {
33
+ console.log('onMountedX')
34
+ })
35
+ }
36
+ });
37
+
38
+ let ComponentX = Vue.extend({
39
+ mounted: function(){
40
+ this.$bus.$emit('onMountedX')
41
+ }
42
+ components: [ComponentY]
43
+ });
44
+ ```
45
+
46
+ ただし、より大規模なものを作る場合はvuexみたいなものでステート管理を行うのが良いです。