我是靠谱客的博主 懦弱招牌,这篇文章主要介绍Vue3 事件总线为什么要使用总线事件总线事件系统逻辑:Vue2 创建方式vue3官网推荐使用 mitt 第三方库**Vue3 官网 关于事件总线给出的说明**,现在分享给大家,希望可以做个参考。

为什么要使用总线事件

答:一般父子组件通信,就直接使用事件抛出emit就好,但是如果两个组件没有关系 或者 关系嵌套层级很多,就要采用总线事件系统。

总线事件系统逻辑:

A组件抛出事件名a,B组件里面,在mounted生命周期监听事件名a,并做出处理。

Vue2 创建方式

import Vue from 'vue';
Vue.prototype.$bus = new Vue();

为什么这样使用呢?

因为 在 Vue2 API 中实例方法/事件 中,存在这个 vm.$on 和vm.$emit 两个接口

 

vue3官网推荐使用 mitt 第三方库

npm install --save mitt
//main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

//挂载事务总线
import mitt from 'mitt'
app.config.globalProperties.$bus = new mitt();

app.use(Vue3DraggableResizable);
app.mount('#app')

在其它组件使用

//事件抛出
this.$bus.emit("closeCommunicateFrame");


//事件接收
this.$bus.on('closeCommunicateFrame',()=>{
     this.communicateObj.isShow = false;
})

========================== 分割线 ======================================

**Vue3 官网 关于事件总线给出的说明**

根据官网说明,不鼓励使用总事件系统,优先使用其它替代方案去解决

最后

以上就是懦弱招牌最近收集整理的关于Vue3 事件总线为什么要使用总线事件总线事件系统逻辑:Vue2 创建方式vue3官网推荐使用 mitt 第三方库**Vue3 官网 关于事件总线给出的说明**的全部内容,更多相关Vue3内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(173)

评论列表共有 0 条评论

立即
投稿
返回
顶部