vue全局事件总线的简单使用

                  在学习vue的过程中我感受到了他的强大和简便,只需按规则引入命令和扩展文件就可以让网页功能达到我们的预期效果。对于初学者来说是非常友好的。他的数据绑定,组件化思想,能很好的理解他的API(命令集合)。在众多API中,我非常喜欢他的组件之间传递数据的功能,有props父传子,$emit子传父,路由,全局事件,$refs引用指定组件实例等等,其中我非常喜欢的是全局事件和props/emit。

以下是全局事件总线的简单使用方法:

全局事件可以与任何的组件通信,大部分在用在兄弟组件和跨级通信(爷爷和孙子)等,他就像一个快递员(  所有的组件对象都必须能看见他)帮我们把想要传递的信息送到指定的组件。
使用步骤:

一、首先在我们需要邀请一位有名字的快递员准备出单

      在main.js中的实例Vue中引入,他在实例数据还没有加载完成之前创建,美元号后面的命名$bus就是快递员的名字(美元号是为了区分)

beforeCreate() { Vue.prototype.$bus = this }

  二、 在接收数据的组件mounted的钩子中接收数据

          因为mounted刚好是组件数据挂载完毕的时间点,所以接受的数据刚好能被准备好, 使用$on关键字开通全局事件总线,相当于下单, 第二个参数位置是箭头函数,其中的this指向组件实例,所以可以直接调用methods中的方法
第一个参数‘submit’就是订单号(自己命名),注意快递员名字也要对应
this.$bus.$on('submit',(data)=>{this.getson(data)});

三、在发送数据的组件里

在合适的地方,比如方法中使用
this.$bus.$emit('submit',obj)

         $emit是发射的含义,他是关键字,括号里的第一个是订单号,相当于快递单号,他是字符串所以必须加上引号,第二个参数就是你要发送的数据,

四、快递员也有下班的时候

        在组件实例对象销毁之前,最好让他下班,使用$off关键字,关闭的意思(可以放出空间让其他组件使用)
beforeDestroy() { this.$bus.$off('submit')

这就是全局事件总线的使用,简单的教程,希望大家能够分享更多细节,指正错误。
  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中,全局事件总线的实现方式与Vue 2有所不同。Vue 3推荐使用`mitt`库来实现全局事件总线的功能。下面是使用Vue 3和`mitt`库实现全局事件总线的示例: 首先,安装`mitt`库: ```shell npm install mitt ``` 然后,在你的Vue应用程序的入口文件(通常是`main.js`)中,设置全局事件总线: ```javascript import { createApp } from 'vue'; import mitt from 'mitt'; const app = createApp(App); // 创建一个事件总线实例 const eventBus = mitt(); // 将事件总线实例挂载到Vue应用的全局属性中 app.config.globalProperties.$bus = eventBus; app.mount('#app'); ``` 现在,你可以在任何组件中通过`this.$bus`来访问全局事件总线,并使用它来触发和监听事件。 在发送方组件中触发事件: ```vue <template> <button @click="sendMessage">发送消息</button> </template> <script> export default { methods: { sendMessage() { this.$bus.emit('message', 'Hello, EventBus!'); } } } </script> ``` 在接收方组件中监听事件: ```vue <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } }, mounted() { this.$bus.on('message', (text) => { this.message = text; }); } } </script> ``` 在接收方组件的`mounted`钩子函数中,我们使用`this.$bus.on`方法来监听名为`message`的事件,并在事件触发时更新组件的`message`数据。 这样,当发送方组件点击按钮时,会触发`message`事件,并传递消息内容给接收方组件,接收方组件会更新界面上的文本。这就完成了全局事件的传递与监听。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值