vue3 事件总线 emit

最新推荐文章于 2024-07-13 06:15:00 发布

代码就是bug

最新推荐文章于 2024-07-13 06:15:00 发布

阅读量2.8k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/XKFC1/article/details/124192137

版权

vue3官网关于事件总线

在vue3中移除了$on $off等，事件总线可以使用 mitt 或 tiny-emitter 代替

使用mitt

安装 npm install --save mitt

自己建一个mitt.js

import mitt from 'mitt';
const emitter = mitt();
export default emitter;

引入并使用

import emitter from "@/utils/mitt";

// 发送值
emitter.emit('machine-info', {region: e.target.options.icon.options.region});

import emitter from "@/utils/mitt";
// 在其他组件监听
emitter.on('machine-info',(data)=>{
   console.log(data)
}）
// 组件销毁时记得卸载监听
emitter.off('machine-info')

官网表示能不使用总线就不使用总线，尽可能使用vuex，或者provide和inject

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

代码就是bug

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue3 事件总线 emit

vue3 事件总线 emit
复制链接

扫一扫

Vue3 emit

且听风吟的博客

05-17

9659

Vue3 emit

Vue事件总线，组件通信，方法监听 emit、on

Bue_Sky的博客

09-18

532

Vue事件总线，组件通信，方法监听 emit、on 提示：主要在于记录使用方式提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Vue事件总线，组件通信，方法监听 emit、on一、父子组件通信二、通过Vue事件总线的方式实现非父子组件通信总结一、父子组件通信代码如下（示例）： <body> <div id="app"> <counter @change="handleChange"></counter&g

参与评论您还未登录，请先登录后发表或查看评论

vue Emitter

weixin_30834783的博客

08-16

750

vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on vm.$on( event, callback )监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( event, […args] )触发当前实例上的事件。附加参数都会传给监听器回调。例子： //父组件 ...

【Vue】Vue3的emits方法

热门推荐

qq_41196217的博客

10-11

1万+

mitt库在vue3中的使用 Vue3移除了$on $off等自带的自定义事件相关方法，因此在vue3中他推荐我们下载mitt库来使用事件总线传递数据，其实mitt的使用方式和vue原本的自定义事件使用方式相同，所以我们不必担心学习成本！安装mitt库 npm i mitt 使用mitt库可以在单独的文件暴露出事件总线对象 // mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象 /* eventbus.js */ // 这里我们在js中暴露这个事件总线对象 import mit

vue3中事件总线的使用

weixin_43933771的博客

07-23

2472

事件总线 Vue3从实例中移除了 on、on、on、off 和 $once 方法，所以我们如果希望继续使用全局事件总线的话，就需要通过第三方库： Vue3官方有推荐一些库，例如 mitt 或 tiny-emitter；这里我们主要说一下mitt库的使用；首先，我们需要先安装这个库： npm install mitt 其次，我们为了避免对其的依赖，因此需要封装成一个单独的eventbus.js文件： import mitt from 'mitt'; const emitter = mitt();

解决vue bus.$emit触发第一次$on监听不到问题

10-15

Vue提供了多种方法实现组件间通信，其中Vue实例的事件总线（Event Bus）是一个轻量级事件通信机制，对于非父子关系的组件间通信尤为适用。然而，在实际开发过程中，可能会遇到使用bus.$emit触发事件时，第一次$on...

vue2事件总线event bus

青山不改，绿水长流。

09-26

1061

vue2事件总线event bus。

【uni-app】2-1 uniapp & vue 事件总线

蜗牛的博客

10-27

813

事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

vue3.x emit 用法

hsany330的专栏

07-06

607

child.vue <template> <div> <p>hello world</p> <button @click = "go" class="btn btn-success">go</button> </div> </template> <script lang="ts"> import Vue from 'v

vue3组件之间传值，父传子(props)，子传父(emit)，兄弟之间传值（mitt()插件）

weixin_51710069的博客

01-15

4691

vue3兄弟之间传值，父传子，子传父，emit（）的使用，mitt（）的使用

vue3 vue2的兄弟组件的传值_vue兄弟组件emit传值

2401_84435192的博客

04-27

181

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue3：组件间通信-使用mitt实现任意组件间通信

Brave_heart4pzj的博客

04-03

754

Vue

vue3:兄弟组件，跨组件传值，事件总线的通信方式（mitt / tiny-emitter）

暴走的山交君的博客

11-23

569

在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案，但从长期来看，它维护起来总是令人头疼。更多的直接去npm或者github上查阅即可，tiny-emitter的用法与mitt差不多也都是保持一致的，最后说明；按照vue2的习惯，组件卸载的时候，关闭监听的事件，和vue2的写法上基本保持一致，页面如下。2. 找到vue项目中的utils文件夹，新建一个bus.js。3. 使用，我现在需要使用mitt进行兄弟组件之间的通信实现。子组件-child2。

vue3组件间通信

m0_52744273的博客

04-01

1521

父与子通信，使用props、$attrs、$parent、$emit；父与后代通信，使用provide、inject；任意组件间通信，使用事件总线。

Vue中的发布订阅分析（Vue3中使用 emit ）

前端kk的博客

03-23

3855

Vue中的发布订阅分析（Vue3中使用 emit ）

web前端之vue移除监听不起作用的解决办法、监听的使用、删除监听、卸载监听、关闭监听、事件总线、方案、watch

10-26

8856

web前端之vue移除监听不起作用的解决办法、监听的使用、删除监听、卸载监听、关闭监听、事件总线、方案、watch

vue3 事件总线 $on $emit

06-01

Vue 3 中事件总线的实现与 Vue 2 中的略有不同，Vue 3 中使用了一个新的 API `createApp` 来创建应用实例，并且将事件总线的实现抽象成了一个单独的模块 `mitt`。要使用事件总线，在组件中需要先导入 `mitt` 模块： ```javascript import mitt from 'mitt'; ``` 然后在组件中创建一个事件总线实例： ```javascript const emitter = mitt(); ``` 在需要向其他组件中发送事件的地方，可以使用 `$emit` 方法： ```javascript emitter.emit('eventName', data); ``` 在需要监听事件的组件中，可以使用 `$on` 方法来监听事件： ```javascript emitter.on('eventName', (data) => { // 处理事件 }); ``` 需要注意的是，事件总线是一个全局实例，可以在不同的组件中使用。但是在使用时，需要先导入 `mitt` 模块并创建一个新的实例。