Vue中央事件总线bus

大家都知道,一个

,可以作为一个简单的组件传递数据,用于解决跨级和兄弟组件通信问题,那么,这篇文字,我将使用这种思想,将bus封装为一个Vue的插件,可以在所有的组件间任意使用,而不需要导入bus。

首先,我们使用vue-cli创建一个项目vue-bus, 在src目录下,新建vue-bus.js文件,vue-bus插件像vue-router 和 Vuex一样,给Vue对象添加一个属性$bus,并代理$emit、$on、$off三个方法。代码如下:

const install = (Vue)=>{
  const Bus = new Vue({
    methods:{
      emit(event,...args){
        this.$emit(event,...args)
      },
      on(event,...args){
        this.$on(event,...args)
      },
      off(event,...args){
        this.$off(event,...args)
      }
    }
  }) 
  Vue.prototype.$bus = Bus;
}

export default install

在main.js中使用插件,代码如下:

import Vue from "vue";
// import App from "./App.vue";
// import router from "./router";
// import store from "./store";
// import axios from "axios";
import VueBus from './vue-bus';
Vue.use(VueBus);

接下来,在views目录下,新建一个组件 Counter.vue,代码如下:

<template>
  <div class="counter">
    <button @click="randomAddHandler">randomAddHandler</button>
  </div>
</template>
<script>
export default {
  name: "counter",
  props: ["number"],
  methods: {
    randomAddHandler() {
      var num = Math.floor(Math.random() * 100);
      this.$bus.emit("getRandomNum", num);
    }
  }
};
</script>

在它的非父子组件中使用。

<template>
  <div class="child">
    {{number}}
    <input type="text" v-model="$attrs.messageC" @input="setCData($attrs.messageC)">
  </div>
</template>
<script>
export default {
  name:'child',
  data(){
    return{
      number:''
    }
  },
  created(){
    this.$bus.on('getRandomNum',val=>{
      this.number = val;
    })
  },
  beforeDestroy(){
    this.$bus.off('getRandomNum')
  },
  methods:{
    setCData(val){
      this.$emit('getCData',val)
    }
  }
}
</script>

note!

 

使用vue-bus有两点需要注意,第一是$bus.on应该在created钩子内使用,如果在mounted使用,它可能接收不到其他组件来自created钩子内发出的事件;第二点是使用了$bus.on在beforeDestory钩子里应该需要使用$bus.off解除,因为组件销毁后,就没有必要把监听的句柄存储在vue-bus里面了

 

 

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值