vue中使用中央事件總線bus

時間 2019-11-17

標籤 vue 使用中央事件總線 bus 欄目主板简体版

原文原文鏈接

vue中父組件向子組件傳值使用props，非父子組件間傳值時能夠使用事件總線，或者使用vuex，來看下事件總線的例子。javascript

上代碼，以下:html

一、vue-bus.js

List-1 vue-bus.jsvue

const install = function (Vue) {
  const Bus = new Vue({
    methods: {
      emit(event, ...args) {
        this.$emit(event, ...args);
      },
      on(event, callback) {
        this.$on(event, callback);
      },
      off(event, callback) {
        this.$off(event, callback);
      }
    }
  });
  Vue.prototype.$bus=Bus;//因爲放在原型上
};
export default install;

以後在main.js中引入vue-bus.js，以下List-2所示。java

List-2vue-router

import VueBus from './vue-bus'

Vue.use(VueBus);

以後建立一個counter.vue，能夠放在vue腳手架的components下，也能夠放在其它目錄，以下vuex

二、counter.vue

List-3 counter.vuedom

<template>
  <div>
    {{number}}
    <button @click="handleAddRandom">隨機增長</button>
  </div>
</template>

<script>
  export default {
    name: "counter",
    props: {
      number: {
        type: Number
      }
    },
    methods: {
      handleAddRandom() {
        const num = Math.floor(Math.random() * 100 + 1);
        console.log("生產的num:" + num);
        this.$bus.emit('add', num);
      }
    }
  }
</script>

<style scoped>

</style>

對上面List-3的說明，會接收來自父組件的參數number，並顯示出來；有個按鈕，點擊會調用函數handleAddRandom，生成一個隨機數，並調用事件總線的emit方法，將隨機數給事件總線，由事件總線。函數

三、index.vue

建立index.vuethis

List-4 index.vuespa

<template>
  <div>
    隨機增長:
    <counter :number="number"></counter>
  </div>
</template>

<script>
  import counter from './counter'

  export default {
    name: "index",
    components: {
      counter
    },
    data() {
      return {
        number: 0
      }
    },
    methods: {
      handleAddRandom(num) {
        this.number += num;
      }
    },
    created() {
      //this.$bus.on須要在created中使用，不然不會生效
      this.$bus.on('add', this.handleAddRandom);
    },
    beforeDestroy() {
      //須要在beforeDestroy中移除
      this.$bus.off('add', this.handleAddRandom);
    }
  }
</script>

<style scoped>

</style>

List-4中，引入counter.vue，做爲其子組件，定義數據number，並傳給子組件；在created方法中經過$bus.on來監聽"add"，以後會調用handleAddRandom方法。

List-5 在router中使用以前建立vue組件

import Vue from 'vue'
import Router from 'vue-router'

import indexBus from 'components/vuebus/index'

Vue.use(Router);

export default new Router({
  routes: [             
    ....
    {                
      path: '/indexBus',   
      name: 'indexBus',     //路由名稱，
      component: indexBus   //對應的組件模板
    },
  ]
})

總體以下圖1所示。