vue3事件总线的使用
忘魂儿
2022年03月09日 11:09
收录于文集
共109篇

适用于不同组件之间，非父子组件之间

一，全局引入

Vue3.x以后从实例中移除了on，off和once 方 法，不过 emit 仍然是现有 API 的一部分，但也只能实现子组件触发父组件的方法

此时就得依赖于mitt模块

代码块
JavaScript
自动换行
复制代码
安装方法：npm install --save mitt或者yarn add mitt -S
main.js中
普通引入方法：
import mitt from 'mitt';
const bus = mitt();
const app = createApp(App)
app.config.globalProperties.$bus = bus
app.use(store).use(router).mount('#app')
复制成功

普通使用方法：

代码块
JavaScript
自动换行
复制代码
已知Bro1和Bro2组件是兄弟组件
Bro2中
import {getCurrentInstance} from 'vue';
export default {
        setup(props) {
            const ins=getCurrentInstance()
            const bus=ins.appContext.config.globalProperties.$bus
            function passE(){
                bus.emit('bro','xwl')
            }
            return {
                passE
            }
        }
}
Bro1中
import {getCurrentInstance} from 'vue';
export default {
        setup(props) {
            const ins=getCurrentInstance()
            const bus=ins.appContext.config.globalProperties.$bus
            onMounted(()=>{
                bus.on('bro',(value)=>{
                    console.log(value);
                })
            })
            return { }
        }
}
复制成功

高级注入方法:全局提供，局部注入

代码块
JavaScript
自动换行
复制代码
已知Bro1和Bro2组件是兄弟组件
Bro2中
import {inject} from 'vue';
export default {
        setup(props) {
            const bus=inject('bus')
            function passE(){
                bus.emit('bro','xwl')
            }
            return {
                passE
            }
        }
}
Bro1中
import {onMounted,inject} from 'vue';
export default {
        setup(props) {
            const bus=inject('bus')
            onMounted(()=>{
                bus.on('bro',(value)=>{
                    console.log(value);
                })
            })
            return { }
        }
}
复制成功

不与Vue建立链接，直接局部引入，直接用这个库

代码块
JavaScript
自动换行
复制代码
/封装到一个js文件中(eventbus)
import mitt from 'mitt';

const emitter = mitt();
// export const emitter1 = mitt();
// export const emitter2 = mitt();
// export const emitter3 = mitt();

export default emitter;
//组件按需引入
<template>
  <div>
    <button @click="btnClick">按钮点击</button>
  </div>
</template>

<script>
  import emitter from './utils/eventbus';

  export default {
    methods: {
      btnClick() {
        console.log("about按钮的点击");
        emitter.emit("why", {name: "why", age: 18});
        // emitter.emit("kobe", {name: "kobe", age: 30});
      }
    }
  }
</script>
复制成功

本文为我原创，未经授权禁止转载
cv15580240