vue中使用中央事件总线bus 原

克虏伯

发布于 2019-04-15 10:24:33

8190

发布于 2019-04-15 10:24:33

文章被收录于专栏：软件开发-青出于蓝软件开发-青出于蓝

vue中父组件向子组件传值使用props，非父子组件间传值时可以使用事件总线，或者使用vuex，来看下事件总线的例子。

上代码，如下:

1、vue-bus.js

List-1 vue-bus.js

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所示。

List-2

import VueBus from './vue-bus'

Vue.use(VueBus);

之后创建一个counter.vue，可以放在vue脚手架的components下，也可以放在其它目录，如下

2、counter.vue

List-3 counter.vue

<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方法，将随机数给事件总线，由事件总线。

3、index.vue

创建index.vue

List-4 index.vue

<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所示。

图4.1

Reference:

1、梁灏，Vue.js实战，清华大学出版社

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018/11/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

vue.js

javascript

登录后参与评论

0 条评论

热度