Vue3实战笔记(54)—揭秘Vue3实战:1分钟学会mitt,轻松玩转跨组件通讯

62 篇文章 1 订阅
62 篇文章 1 订阅


前言

在 Vue3 中,由于官方移除了on\off 和 $once 实例方法,导致原先基于 Vue2 的事件总线(EventBus)模式不再适用。因此,对于需要进行组件间通信的场景,Vue3 推荐使用如 props、emits、provide/inject、vuex、pinia 等官方提供的方案。然而在某些情况下,开发者可能仍希望利用事件总线的简单性,特别是在小型项目中。这时,Mitt.js 就成为了一个推荐的选项,它提供了与框架无关、简洁且高效的事件监听和触发机制。


一、自定义的 useMitt

Mitt.js 是一个轻量级的第三方事件发射器库,专为 Vue3 和其他框架设计。

在 Vue 3 中使用 mitt 或类似的库时,我们通常会创建一个自定义的 useMitt Composition API 函数,以便在组件内部使用 mitt 的功能。这样,我们就可以利用 Vue 3 的 Composition API 来更好地组织和复用逻辑。

首先,创建一个 useMitt.js 文件,并在其中定义一个 useMitt 函数,用于返回 mitt 实例的方法。


// useMitt.js  
import mitt from 'mitt';  
  
// 创建一个 mitt 实例,并导出相关的函数  
const emitter = mitt();  
  
export function useMitt() {  
  return {  
    emit: emitter.emit.bind(emitter),  
    on: emitter.on.bind(emitter),  
    off: emitter.off.bind(emitter),  
    // 可以根据需要添加其他 mitt 方法  
  };  
}

二、在组件中使用 useMitt:

现在,你可以在任何需要通信的组件中导入并使用 useMitt 函数。每个组件都将使用相同的 mitt 实例来发射和监听事件。

代码如下(示例):

// ChildComponent.vue  
<template>  
  <button @click="emitEvent">Emit Event</button>  
</template>  
  
<script>  
import { ref } from 'vue';  
import { useMitt } from './useMitt';  
  
export default {  
  setup() {  
    const { emit } = useMitt();  
    const message = ref('Hello from ChildComponent!');  
  
    const emitEvent = () => {  
      emit('child-event', message.value);  
    };  
  
    return {  
      emitEvent,  
    };  
  },  
};  
</script>

// ParentComponent.vue  
<template>  
  <div>  
    <ChildComponent />  
    <p v-if="receivedMessage">Received: {{ receivedMessage }}</p>  
  </div>  
</template>  
  
<script>  
import { ref, onMounted, onBeforeUnmount } from 'vue';  
import ChildComponent from './ChildComponent.vue';  
import { useMitt } from './useMitt';  
  
export default {  
  components: {  
    ChildComponent,  
  },  
  setup() {  
    const { on, off } = useMitt();  
    const receivedMessage = ref(null);  
  
    onMounted(() => {  
      on('child-event', (message) => {  
        receivedMessage.value = message;  
      });  
    });  
  
    onBeforeUnmount(() => {  
      off('child-event');  
    });  
  
    return {  
      receivedMessage,  
    };  
  },  
};  
</script>

在这个例子中,ChildComponent 发射一个名为 child-event 的事件,并附带一条消息。ParentComponent 则监听这个事件,并在接收到消息时更新其状态。由于 ChildComponent 和 ParentComponent 都使用同一个 mitt 实例(通过 useMitt 函数获取),它们能够顺利地进行通信。

三、确保 useMitt 的单例性

代码如下(示例):

重要的是要确保在整个应用程序中只创建一个 mitt 实例,并通过 useMitt 函数共享它。这样可以避免在组件之间产生多个事件流,并确保事件的正确传播。在上面的例子中,useMitt.js 文件中的 emitter 是在模块作用域内创建的,因此每个导入 useMitt 的组件都会得到相同的实例。


总结

通过这种方法,你可以轻松地在 Vue 3 的多个组件之间使用 mitt 进行通信。只需确保所有组件都通过 useMitt 函数访问相同的 mitt 实例,然后就可以自由地发射和监听事件了。

童年啊,童年是永远的梦 梦里的小船,飘荡在彩虹的河流 童年的纸飞机,飞向云端 童年的歌谣,唱出心中的欢乐

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值