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

2024-12-01 15:04:38

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进行组件通信的资料请关注我们其它相关文章！

vue element-ui table组件动态生成表头和数据并修改单元格格式父子组件通信

父组件定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据.(真实数据应该是从接口获取的,由于是测试数据这里我先写死)
详解利用eventemitter2实现Vue组件通信

概述当两个组件之间没有任何父子关系时,利用Vue标准的props传值和emit触发事件无法解决他们之间通信的问题.最近做的项目使用的是eventemitter2,来实现不相关组件之间的通信.这篇文章分享的是我对eventemitter2使用的总结和体会. eventemitter2的npm文档大家可以看eventemitter2介绍.它是node.js提供的事件接口.安装如下 npm install --save eventemitter2 模块的EventEmitter2属性是一个构造函数,
Vue.js组件通信之自定义事件详解

组件通信从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示: 自定义事件当子组件需要向父组件传递数据时,就要用到自定义事件.子组件用**$ emit()来触发事件**,父组件用**$ on()**来监听子组件的事件. 父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件. <!DOCTYPE html> <html lang="en"> <head>
如何用Vue实现父子组件通信

一.父子组件的关系构成本篇文章将要总结的是Vue中父子组件之间的通信方式. 那在vue中父子组件之间的关系是怎么构成的呢,或者说哪个组件可以称为是父组件,哪个组件又可以称为是子组件呢. 在我的理解中,父子组件的关系构成也比较简单. 使用vue-cli工具构建的项目中,我们经常会在一个组件中注册引用另外一个组件. Home.vue <template> <div class="home"> <p>这里是Home组件</p> </di
Vue组件通信的几种实现方法

组件的通信一般常见的组件之间的通信有以下几种情况,A和B,B和C,B和D之间都是父子关系,C和D之间是兄弟组件关系. 常用的通信手段有两种: 1.ref:给元素或组件注册引用信息 2.children:访问父级组件和子组件的实例. 这两种方式都是直接通过实例的方式获取的方式.示例如下: //comA组件A export default { data () { return { title: '测试通信' } }, methods: { sayHello () { window.alert('你
Vue组件通信中非父子组件传值知识点总结

前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是我总结的父子传值相关的知识,可供参考: https://www.jb51.net/article/121806.htm 然后大概回顾一下父子传值的过程: 根据上述信息可知,如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据. 那么如果有这样一个组件,既可以帮你传递数据,又可以帮你接
Vue如何实现组件间通信

1. 父子间通信最常见的就是父子之间的通信,通信是双向的数据传递. 1.1 父组件 --> 儿子组件父组件向儿子组件传递数据的方式就是通过 Prop 向子组件传递数据. //child.vue <template> <div> 我是儿子,我收到来自父亲的数据为 {{value}} </div> </template> <script> export default { props:{ value: String } } //App.v
vue中组件通信的八种方式（值得收藏！）

前言之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间
vue父子组件通信的高级用法示例

前言 vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父父组件 <template> <div class="parent"> 我是父组件   <children :msg="msg" @s
Vue3使用mitt进行组件通信的步骤

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. 引入到项目并挂载可
Vue3的7种种组件通信详情

目录 1.Vue3 组件通信方式 2.Vue3 通信使用写法 2.1 props 2.2 $emit 2.3 expose / ref 2.4 attrs 2.5 v-model 2.6 provide / inject 2.7 Vuex 1.Vue3 组件通信方式 props $emit expose / ref $attrs v-model provide / inject Vuex 2.Vue3 通信使用写法 2.1 props 用 props 传数据给子组件有两种方法,如下方法一:混合
Vue3.x使用mitt.js进行组件通信

目录快速开始使用方式核心原理 Vue2.x 使用 EventBus 进行组件通信,而 Vue3.x 推荐使用 mitt.js. 比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢?首先它足够小,仅有200bytes,其次支持全部事件的监听和批量移除,它还不依赖 Vue 实例,所以可以跨框架使用,React 或者 Vue,甚至 jQuery 项目都能使用同一套库. 快速开始 npm install --save mitt 方式1,全局总线,vue 入口文件 main.js
Vue2和Vue3的10种组件通信方式梳理

目录 props emit attrs和listeners provide/inject parent/children expose&ref EventBus/mitt 写在最后 Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式. 其中将要实现的通信方式如下表所示: 方式 Vue2 Vue3 父传子 props props 子传父 $emit emits 父传子
vue3组件通信的方式总结及实例用法

vue3组件通信方式为以下几种 props $emit $expose / ref $attrs v-model provide / inject Vuex mitt props <child :msg2="msg2" /> <script setup> const props = defineProps({ // 写法一 msg2:String // 写法二 msg2:{ type:String, default:'' } }) console.log(pro
Vue3全局组件通信之provide / inject详解

目录 1.前言 2.provide / inject 3.发起 provide 4.接收 inject 5.响应性数据的传递与接收 6.引用类型的传递与接收 (针对非响应性数据的处理) 7.基本类型的传递与接收 (针对非响应性数据的处理) 1.前言顾名思义,爷孙组件是比父子组件通信要更深层次的引用关系(也有称之为 “隔代组件”): C组件引入到B组件里,B组件引入到A组件里渲染,此时A是C的爷爷级别(可能还有更多层级关系),如果你用 props ,只能一级一级传递下去,那就太繁琐了,因此我
详解Vue3的七种组件通信方式

目录写在前面举一个栗子 Props方式 emit方式 v-model方式 refs方式 provide/inject方式事件总线状态管理工具写在前面本篇文章是全部采用的<script setup>这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由,具体可以参考Vue文档对两种方式的描述. 本篇文章将介绍如下七种组件通信方式: props emit v-model refs provide/inject eventBus vuex/pinia(状态管理工具) 开始搞
Vue3的10种组件通信方式总结

目录引言 Props emits expose/ref Non-Props 单个根元素的情况多个元素的情况 v-model 单值的情况多个v-model绑定 v-model修饰符插槽slot 默认插槽具名插槽作用域插槽 provide/inject 总线bus getCurrentInstance Vuex 安装使用 State Getter Mutation Action Module Pinia 安装注册在组件中使用啰嗦两句 mitt.js 安装使用总结引言本文讲
Vue3中10多种组件通讯方法小结

目录 Props emits expose / ref Non-Props 单个根元素的情况多个元素的情况 v-model 单值的情况多个 v-model 绑定 v-model 修饰符插槽 slot 默认插槽具名插槽作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装注册 mitt.js 安装使用本文讲解 Vue 3.2 组件多种通讯方式
Vue2.0学习之详解Vue 组件及父子组件通信

什么是组件? vue中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘,键盘,鼠标),它就是一个具有独立逻辑或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用. 页面就是由一个个类似这样的部分组成的,比如导航,列表,弹窗,下拉列表等.页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行. 前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西. 使用组件的

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

1. 安装

2. 引入到项目并挂载

3. 使用

相关推荐

随机推荐