vue3事务总线写法，vue3公共总线写法emit

最新推荐文章于 2024-09-04 14:17:28 发布

1964347597

最新推荐文章于 2024-09-04 14:17:28 发布

阅读量642

点赞数 1

文章标签： vue.js ts

本文链接：https://blog.csdn.net/qq_28813031/article/details/120512446

版权

这篇博客介绍了两种在Vue应用中实现组件间通信的方法。第一种是通过mitt库创建全局事件总线，分别在组件中进行事件的发射和监听。另一种方法是创建一个comBus.ts文件，导出mitt实例并命名为bus，然后在各组件中导入并使用bus进行事件的触发和接收。这两种方法都详细展示了如何在不同组件中发送和接收自定义事件。

摘要由CSDN通过智能技术生成

1.方法1写法：
需要安装mitt
npm install --save mitt

// main.ts中写法
import mitt from "mitt"
import { createApp } from "vue"

const app = createApp({})  //正常配置
// main挂载事务总线
app.config.globalProperties.$mittBus = mitt();

// 一个界面进行发送
setup() {
    // 创建代理实例
   const { proxy } = getCurrentInstance() as any;
   // 方法发送
   const refreshCurrentTagsView = (path: string) => {
       proxy.mittBus.emit('onTagsViewRefreshRouterView', path);
   };
}
// 另一个界面接受
setup() {
// 页面加载前，处理缓存，页面刷新时路由缓存处理
onBeforeMount(() => {
   proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
      if (route.path !== path) return false;
   });
});
// 页面卸载时
onUnmounted(() => {
   proxy.mittBus.off('onTagsViewRefreshRouterView');
});
}
2.方法2写法
新建comBus.ts文件，内容如下：
import mitt from 'mitt'
const bus = {}
const emitter = mitt()
bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit
export default bus
----------------------------------------------------------
①界面引入文件
import comBus from '@/views/AatoBus/comBus'
export default defineComponent({
   mixins: [ComBus],
})
②进行发送comBus .$emit
comBus .$emit('defaultCursorExecToOneRow', item)
③需要的界面进行接受
onBeforeUnmount(() => {
  // 防止多次执行，ComBus发送的都要增加
  ComBus.$off("defaultCursorExecToOneRow");
});
onMounted(() => {
  ComBus.$on('defaultCursorExecToOneRow',(item)=>{
     // 进行接受值的处理
  });
})