Vue简单实例——全局事件总线

本文介绍了如何在Vue应用中使用全局事件总线来实现在兄弟组件间的通信,通过创建一个Vue实例的原型属性$bus,子组件通过$emit触发事件,其他组件通过$on接收事件,解决了跨层级组件的数据交互问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 简单介绍:

使用props可以实现父组件向子组件传递数据,使用自定义事件可以实现子组件向父组件传递数据,那么,如何实现兄弟组件之间传递数据就应用到了全局事件总线这个概念。在子组件向父组件传递数据的时候,使用的是在父组件中在子组件的标签上绑定一个自定义事件,并在子组件中触发这个自定义组件,从而完成通信的过程。但是兄弟组件之前不存在互相引用组件的形式,那么这个事件要绑定在谁身上就是第一个问题。

这个人,首先要能被所有的VueComponents组件所引用到,并且能完成绑定事件和触发事件的功能。所以,能满足这两个条件的对象就是Vue实例对象。因为你所有的组件对象都是Vue调用component创建出来的,所以肯定是可以被发现的,而组件对象是肯定可以调用触发和绑定事件的,所以现在知道给谁绑定了之后,接下来就是如何获取这个对象。

要获取Vue的实例对象,就要去main.js中去,因为这里是唯一定义Vue实例对象的地方,所以在main.js中,添加如下代码:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //安装全局事件总线,就是在创建之前,给Vue实例添加一个对象,并将Vue实例赋值给这个对象,使这个对象可以作为Vue实例使用
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

 在beforCreate这个生命周期钩子函数中,给Vue实例对象添加一个对象,赋值为一个Vue实例对象,这个过程叫做安装全局事件总线。

全局事件总线的基本理念,是将所有的发送数据和接收数据的事件都绑定在一个人身上,每次触发事件的时候,都要经过这个人,所以解决了必须在子组件的标签中绑定事件的弊端,实现了即使不是父子关系的组件之间通信的问题

 发送数据的子组件:

<template>
<div>
<!--  这个子组件是用来发送数据的-->
<!--  将点击事件绑定到方法,方法中出发一个自定义事件,这个自定义事件是绑定在事件总线上的-->
  <button type="button" @click="sendData">传递数据</button>
</div>
</template>

<script>
export default {
  name: "s_com1",
  data(){
    return {
      name:'s_com1'
    }
  },
  methods:{
    sendData(){
      //这个事件名为send的事件是绑定在事件总线上的,在这个子组件上触发之后,实现了提供数据的功能
      this.$bus.$emit('send',this.name)
    }
  }
}
</script>

<style scoped>

</style>

接收数据的子组件: 

<template>
<div>
<!--  这个子组件是用来接受数据的-->
{{count}}
</div>
</template>

<script>
export default {
  name: "s_com1",
  data(){
    return {
      count:''
    }
  },
  mounted() {
    //在这个子组件中,同样使用事件总线绑定了一个事件,事件名就是发送数据的自定义事件名
    //这个绑定事件的语句要写在mounted(钩子函数)内,表示在执行方法之前,首先执行钩子函数中的内容
    //在这个钩子函数中绑定了这个自定义事件,就可以接收到来自这个定义事件所发送的数据
    //数据的接受使用的是一个方法接受
    this.$bus.$on('send',this.rec_data)
  },
  methods:{
    //接收数据的方法,方法中的形参就是接收到的来自其他组件的数据
    //在方法内部可以对数据进行逻辑操作,这里只是简单的将数据存储到组件中的数据中进行展示而已
    rec_data(data){
      this.count = data
    }
  }
}
</script>

<style scoped>

</style>

简单案例:在了解什么是全局事件总线和全局事件总线的基本使用发方法之后,做一个简单的案例

实现效果:

 根据效果图可以看到在我们点击组件A内的按钮时,组件B中的数据同样发生了改变,这就是全局数据总线一个最简单的应用场景

组件A的:

<template>
  <div>
    <p>组件A</p>
    <p>点击自增后将组件中的数据传递给组件B:<button type="button" @click="sendData">{{count}}</button></p>

  </div>
</template>

<script>
export default {
  name: "s_bus_1",
  data(){
    return {
      count:0
    }
  },
  methods:{
    sendData(){
      this.count++
      this.$bus.$emit('send',this.count)
    }
  }
}
</script>

<style scoped>

</style>

组件B:

<template>
  <div>
    <p>组件A</p>
    <p>点击自增后将组件中的数据传递给组件B:<button type="button" @click="sendData">{{count}}</button></p>

  </div>
</template>

<script>
export default {
  name: "s_bus_1",
  data(){
    return {
      count:0
    }
  },
  methods:{
    sendData(){
      this.count++
      this.$bus.$emit('send',this.count)
    }
  }
}
</script>

<style scoped>

</style>

App组件:

<template>
  <div id="app">
    <h1>组件A向总线上报事件</h1>
    <s_bus_1></s_bus_1>
    <h1>组件B通过总线监听相关事件</h1>
    <s_bus_2></s_bus_2>
  </div>
</template>

<script>
import s_bus_2 from "@/components/s_bus_2";
export default {
  name: 'App',
  components: {
    s_bus_1,
    s_bus_2
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意点:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值