$bus的用法 vue

本文介绍了如何在Vue项目中创建一个bus.js文件作为事件总线,将它挂载到Vue实例原型上,以便各个组件间通信。通过$emit触发事件,$on监听事件并处理,最后在组件销毁时清除监听。
  1. 先在utils文件夹下新建一个bus.js文件(bus就是vue的一个实例,可以理解为vue实例化后的一个组件)
	import Vue from 'vue';
	const bus = new Vue();
	export default bus;
  1. 在main.js文件中把bus挂载Vue实例的原型对象上,也就是说用Vue实例化的每个组件都可以访问到这个$bus属性了
import bus from '@/utils/bus.js';
Vue.prototype.$bus = bus;
  1. 使用
// 触发
this.$bus.$emit(event,value)
// 接收
this.$bus.$on(event,(value)=> {console.log(value)})
// 销毁
beforeDestroy() {this.$bus.$off(event)}
$busVue 中实现组件间通信的一种方式,其使用方法如下: ### 引入 $busVue 项目中,需要先引入 $bus,通常是在全局引入: ```javascript Vue.prototype.$bus = Vue.prototype.$bus || new Vue(); ``` 这样在所有的 Vue 组件中都可以通过 `this.$bus` 来访问它 [^3]。 ### 定义监听方法 使用 `this.$bus.$on()` 方法来监听事件,该方法接收两个参数,第一个是事件名称,第二个是回调函数,当监听到对应的事件时,会执行回调函数。例如: ```javascript this.$bus.$on('bus-event', (data) => { console.log('接收到的数据:', data); }); ``` 这里监听了名为 `bus-event` 的事件,当该事件被触发时,会将传递过来的数据打印出来 [^4]。 ### 调用方法(触发事件) 使用 `this.$bus.$emit()` 方法来触发事件,该方法接收至少一个参数,第一个参数是事件名称,后续参数是要传递的数据。例如: ```javascript this.$bus.$emit('bus-event', '123'); ``` 这里触发了名为 `bus-event` 的事件,并传递了数据 `'123'` [^1][^4][^5]。 ### 关闭事件监听 为了避免不必要的内存占用和重复触发,在组件销毁时,需要使用 `this.$bus.$off()` 方法关闭事件监听。通常在 `beforeDestroy` 钩子函数中进行操作: ```javascript beforeDestroy() { this.$bus.$off('bus-event'); } ``` 这样当组件销毁时,对应的事件监听也会被移除 [^1][^2]。 ### 示例代码 以下是一个完整的示例,展示了 $bus 在两个组件间的使用: #### 发送组件 ```vue <template> <button @click="sendData">发送数据</button> </template> <script> export default { methods: { sendData() { this.$bus.$emit('bus-event', '这是发送的数据'); } } } </script> ``` #### 接收组件 ```vue <template> <div></div> </template> <script> export default { created() { this.$bus.$on('bus-event', (data) => { console.log('接收到的数据:', data); }); }, beforeDestroy() { this.$bus.$off('bus-event'); } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值