当前位置: 首页 > news >正文

vue3 非父子组件间传值代码

1、安装 npm i mitt

npm i mitt

2、在src文件夹下utils文件夹,在其下在新建bus.js文件 

import mitt from 'mitt';
const $bus = mitt();
export default $bus;

3、传

import $bus from '../utils/bus.js
// 发送数据
$bus.emit('event',num)

4、收

import $bus from '../utils/bus.js'
// 接收数据
$bus.on('event',(data)=>{console.log(unref(data),'收到值了');
})

 5、踩坑点:点击一次,触发多次,导致多次传递重复的值 解决办法:

在传值的页面加上 ↓

onUnmounted(() => {$bus.off('event');
});

http://www.mrgr.cn/news/55270.html

相关文章:

  • OpenGL、OpenCL 和 OpenAL 定义及用途
  • 分布式---raft算法
  • 【最新通知】2024年Cisco思科认证CCNA详解
  • 网络安全基础知识点_网络安全知识基础知识篇
  • Vue项目兼容IE11
  • CCRC-DSO数据安全官的作用
  • Sigrity-Power SI如何使用Model Extraction模式同时提取电源和信号网络的S参数操作指导
  • vbs给qq发送消息
  • 2024人工智能报告.zip |一文迅速了解今年的AI界都发生了什么?
  • 基于SSM的校园跑腿网站的设计与实现
  • 银行报表测试
  • 简单走近ChatGPT
  • 科隆仪表IFC300W资料下载
  • 【QT速成】半小时入门QT6之QT前置知识扫盲(超详细QT工程解析)
  • MongoDB Shell 基本命令(二)操作符
  • Sigrity-Power SI如何使用Model Extraction模式提取电源网络的S参数和阻抗操作指导(一)
  • 探索CompletableFuture:高效异步编程的利器
  • C-自定义类型-联合和枚举
  • 数据库系统
  • 插件开发流程
  • HTTP Cookie深入解析
  • 从壹开始解读Yolov11【源码研读系列】——cfg:模型配置加载功能
  • DevExpress WPF中文教程:Data Grid的视图概述及主要功能一览
  • 【源码+文档】基于SpringBoot+Vue养老院管理系统
  • 写了十几年程序,今天才第一天知道什么是屎山代码
  • 【升华】python pandas库学习总结