Event Bus

以前は、親コンポーネントと子コンポーネントの間のデータ通信について、位置決めで関連していました.
this.$emitとpropsです
これは、親コンポーネントと子コンポーネント間のデータ通信ではなく、親コンポーネントと子コンポーネント間のデータ通信です.どうすればいいですか?
今回のリリーステーマEvent Busについて説明します.

// utils/bus.js
import Vue from 'vue';

export default new Vue();

バスは、イベントを受信および転送するために使用されます.jsファイルを生成します.
Vueオブジェクト内で$emitと$onを使用します.
$emitを使用してイベントを作成し、イベントを転送します.
アクティビティを受信するために$onを使用してアクティビティを購読します.

// A.vue
<template>
   <div>
      <button @click="sendEvent">send</button>
   </div>
</template>

<script>
import bus from '../utils/bus.js';

export default {
   methods: {
      sendEvent() {
      	bus.$emit('send', 1);
      }
   }
}
</script>

// B.vue
<template>
   <div>
      {{ receivedData }}
   </div>
</template>

<script>
import bus from '../utils/bus.js';

export default {
   data() {
      return {
         receivedData: ''
      }
   },
   methods: {
      receiveEvent() {
      	bus.$emit('send', data => {
           this.receivedData = data;
        });
      }
   }
}
</script>

この原理により,ロードノブを実現できる.

// NewsView.vue
<template>
  <div>
    <list-item />
  </div>
</template>

<script>
import ListItem from '../components/ListItem.vue';
import bus from '../utils/bus.js';

export default {
  components: {
    ListItem
  },
  created() {
    bus.$emit('start:spinner');
    setTimeout(() => {
      this.$store.dispatch('FETCH_NEWS')
        .then(() => {
          console.log('fetched');
          bus.$emit('end:spinner');
        })
        .catch(err => {
          console.log(err);
        });
      bus.$emit('end:spinner');
    }, 3000);
  }
};
</script>

// App.vue
<template>
  <div id="app">
    <tool-bar />
    <main>
      <transition :name="transitionName">
        <router-view></router-view>
      </transition>
    </main>
    <spinner :loading="loadingStatus"/>
  </div>
</template>

<script>
import ToolBar from './components/ToolBar.vue';
import Spinner from './components/Spinner.vue';
import bus from './utils/bus.js';

export default {
  components: {
    ToolBar,
    Spinner
  },
  data() {
    return {
      transitionName: "",
      loadingStatus: false
    };
  },
  methods: {
    startSpinner() {
      this.loadingStatus = true;
    },
    endSpinner() {
      this.loadingStatus = false;
    }
  },
  created() {
    bus.$on('start:spinner', this.startSpinner);
    bus.$on('end:spinner', this.endSpinner);
  },
  beforeDestroy() {
    bus.$off('start:spinner', this.startSpinner);
    bus.$off('end:spinner', this.endSpinner);
  }
}
</script>

App.vueでロードノブを実現します.

NewsView.vue作成()hookから始まるとbus.$emit('start:spinner'); ≪起動|Start|emdw≫:spinnerイベントを使用します.

App.VueからBus.$on('start:spinner', this.startSpinner); 生成されたイベントを購読し、startSpinnerメソッドを実行します.

コンポーネントがフロントバスから消えます.$off('start:spinner', this.startSpinner);生成されたイベントの削除を使用します.

ソース:Vue.js完璧なガイドライン-実践と学習の実戦概念の再構築を通じて