vue兄弟コンポーネント間の価値伝達Bus

2020/3/22
vue兄弟コンポーネント間の価値伝達Bus
メディアとしてvueインスタンスBusを使用することができます.相互に通信する兄弟コンポーネントには、Busが導入され、その後、Busイベントトリガ$emitとリスニング$onをそれぞれ呼び出すことで、windowのグローバルカスタムイベントのようなコンポーネント間の通信とパラメータ伝達が実現されます.子伝の親と同様に、現在のvueの例ではなく、新しいvueの例をメディアとして利用しているにすぎません(this)

// bus.js

import Vue from 'vue';
export default new Vue;

//   a.js

<template>
  <div class='a'></div>
</template>

<script>
import Bus from 'bus.js' ;
export default {
  name: "a",
  created() {
    //              sendData  ，      
    this.sendData();
  },
  methods: {
    sendData () {
      Bus.$emit('listenToA', 'hello');
    }
  }
}
</script>

//   b.js

<template>
  <div class='b'></div>
</template>

<script>
import Bus from 'bus.js';
export default {
  name: "b",
  monted() {
    Bus.$on('listenToA', this.getAData);
  },
  methods: {
    getAData (val) {
      console.log(`a         : ${val}`); // hello
    }
  }
}
</script>