• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue3使用mitt进行组件通信的步骤

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
  • Vue2.x使用EventBus进行组件通信,而Vue3.x推荐使用mitt.js。
  • 比起Vue实例上的EventBus,mitt.js好在哪里呢?首先它足够小,仅有200bytes,其次支持全部事件的监听和批量移除,它还不依赖Vue实例,所以可以跨框架使用,React或者Vue,甚至jQuery项目都能使用同一套库。

1. 安装

推荐使用yarn安装(用过都知道有多丝滑)

yarn add mitt

或者通过npm安装

npm install --save mitt

2. 引入到项目并挂载

可以在main.js挂载到全局

// 标准的ES模块化引入方式
import mitt from 'mitt'

const app = createApp(App)

// vue3.x的全局实例,要挂载在config.globalProperties上
app.config.globalProperties.$EventBus = new mitt()

/common/EventBus.js:也可以封装一个ES模块,对外暴露一个Mitt实例

import mitt from 'mitt'
export default new mitt()

/views/Home.vue:业务模块引入来使用

import EventBus from '/common/EventBus.js'

3. 使用

通过on监听/emit触发

/*
 * App.vue
 */
// setup中没有this,需要通过getCurrentInstance来获取Vue实例
import { getCurrentInstance } from 'vue'
import { Mp3Player } from '/common/Mp3Player.js'

export default {
  setup(){
    // ctx等同于Vue2.x的this
    const { ctx } = getCurrentInstance()
    
    // 监听-如果有新任务则播放音效
    ctx.$EventBus.on('newTask', data => {
      Mp3Player.play()
    })

    // 也可以通过*监听所有任务
    ctx.$EventBus.on('*', data => {
      console.log('EventBus come in', data)
    })
  }
}


/*
 * Control.vue
 */
// 判断有新任务时,触发
ctx.$EventBus.emit('newTask', data)

off移除事件

import {
    onBeforeUnmount,
    getCurrentInstance
  } from 'vue'

export default {
  setup(){
    const { ctx } = getCurrentInstance()

    onBeforeUnmount(() => {
      // 移除指定事件
      ctx.$EventBus.off('newTask')

      // 移除全部事件
      ctx.$EventBus.all.clear()
    })
  }
}

以上就是Vue3使用mitt进行组件通信的步骤的详细内容,更多关于Vue3 用mitt进行组件通信的资料请关注极客世界其它相关文章!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
如何通俗的解释TypeScript 泛型发布时间:2022-02-05
下一篇:
JavaScript中分号的一些细节发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap