vue3 非父子组件间传值代码

news2024/10/21 14:31:45

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.coloradmin.cn/o/2220087.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

全域推广什么意思?如何搭建高效优质的全域推广服务商系统?

当前,全域推广一词的热度日渐升高,越来越多的人开始关注和计划入局这一全新项目,希望能够吃到第一波红利。不过,由于这一项目刚刚兴起,相关资料尚不完善,因此,绝大多数有意向入局的人都对该项目…

创客项目秀 | 基于使用 XIAO BLE Sense 和 Edge Impulse 的宠物活动跟踪器

今天为大家带来的是来自美国的创作者米顿-达斯的作品:宠物活动跟踪器.这个装置主要是为宠物主人提供关于宠物日常活动量的详尽数据,还能够根据宠物的独特需求,提供个性化的健康建议和活动指导。 项目背景 为了全面促进宠物的健康与活力,采用…

来可电子CAN数据记录仪通过智诊小助手TF卡记录文件导出

若想将TF卡中记录的数据文件导出可按以下的流程进行配置: 点击主界面中的导出选项即可进入到下图中TF卡应用界面 点击TF卡应用界面中“查看记录文件”的选项,进入导出文件界面。 点击“选择”进入勾选文件的界面 点击“导出”后,点击“确定”…

Vulnhub打靶-napping

基本信息 靶机下载:https://download.vulnhub.com/napping/napping-1.0.1.ova 攻击机器:192.168.20.128(Windows操作系统)& 192.168.20.138(kali) 提示信息:甚至管理员也可以在工作中睡…

统信UOS与Windows11传输数据

原文连接:统信UOS与Windows11相互传输数据 hello,大家好啊,今天给大家带来一篇统信UOS与Windows11之间通过共享文件夹传输数据的方法,首先在Windows11上创建共享文件夹,然后通过smb协议在UOS上进行连接访问&#xff0c…

彻底解决IDEA SpringBoot项目yml文件没有小树叶,读取配置文件失败问题

报错说没有配置dubbo:application:name,其实是配置了的,就是读不到,那有没有可能是yml文件不是绿叶的问题?网上查了很多文章配置小绿叶,最后还是报这个错,而且网上的文章配置小绿叶也太过于繁琐,其实就一招…

【Java后端】之 ThreadLocal 详解

想象一下,你有一个工具箱,里面放着各种工具。在多人共用这个工具箱的时候,很容易出现混乱,比如有人拿走了你的锤子,或者你找不到合适的螺丝刀。为了避免这种情况,最好的办法就是每个人都有自己独立的工具箱…

Wasm解析入口分析

直接postman请求,发现返回了一个wasm,需要解析这个wasm获取到参数。下面找到页面入口,如下: 也是个VM解析,VM太多了,扣出来就行,不难,就是麻烦的很。

6个最佳核心应用仪表盘构建工具

核心应用仪表盘(Core App Dashboard)的概念或许你不太熟悉,但仪表盘你一定不陌生。 从汽车的仪表盘显示速度和油量,到运动手环仪表盘追踪步数和心率,再到金融投资仪表盘监控股票和基金的实时行情,它们通过…

Flink窗口分配器WindowAssigner

前言 Flink 数据流经过 keyBy 分组后,下一步就是 WindowAssigner。 WindowAssigner 定义了 stream 中的元素如何被分发到各个窗口,元素可以被分发到一个或多个窗口中,Flink 内置了常用的窗口分配器,包括:tumbling wi…

JAVA线程的多种状态

线程的状态图 new状态(新建状态): 创建了一个线程的对象,但是这个线程没有启动start,那么此时这个线程的状态就是NEW也就是新建状态 此时线程对象就是一个普通的JAVA对象,CPU还没有给其分配资源 public class Main16 {…

微信小程序案例:计算器(含代码)

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

动态中的守候:滑动窗口与距离的诗篇

公主请阅 1. 长度最小的子数组1.1 题目说明 示例 1 示例 1 示例 2 示例 3 1.2 题目分析1.3 代码部分1.4 代码分析 2. 无重复字符的最长子串2.1 题目说明示例 1示例 1示例 2示例 3 2.2 题目分析2.3 代码部分2.4 代码分析2.5 代码深度分析 1. 长度最小的子数组 题目传送门 1.1 题…

2020年计算机网络408真题解析

第一题: 解析:OSI参考模型网络协议的三要素 网络协议的三要素:语法 ,语义,同步(时序) 语法:定义收发双方所交换信息的格式 语法:定义收发双方所要完成的操作 网页的加载 …

「iOS」——YYModel学习

iOS学习 前言优势使用方法简单的Model与JSON互转多样化的数据类型交换容器类数据交换 model中包含其他model白名单与黑名单 总结 前言 YYModel是YYKit的高效组件之一,在实际场景中的非常实用,在项目中使用MVC架构时,可以简化数据处理。在性能…

Tailwind Starter Kit 一款极简的前端快速启动模板

Tailwind Starter Kit 是基于TailwindCSS实现的一款开源的、使用简单的极简模板扩展。会用Tailwincss就可以快速入手使用。Tailwind Starter Kit 是免费开源的。它不会在原始的TailwindCSS框架中更改或添加任何CSS。它具有多个HTML元素,并附带了ReactJS、Vue和Angul…

tensorflow c++ api + windwos + vs部署 详细避坑

文章目录 前言一、安装MSYS2二、选择tensorflow的版本三、安装Bazel四、配置一个anconda的tensorflow环境五、生成dll,lib,include六、在vs2019中配置项目七、测试并针对性修补问题 前言 不能使用vs2022配置tensorflow c api,即使要安装 2.10.0版本,也尽…

【Next.js 项目实战系列】02-创建 Issue

原文链接 CSDN 的排版/样式可能有问题,去我的博客查看原文系列吧,觉得有用的话,给我的库点个star,关注一下吧 上一篇【Next.js 项目实战系列】01-创建项目 创建 Issue 配置 MySQL 与 Prisma​ 在数据库中可以找到相关内容&…

机器学习篇-day09-支持向量机SVM

一. 支持向量机介绍 支持向量机 介绍 SVM全称是Supported Vector Machine(支持向量机) 即寻找到一个超平面使样本分成两类,并且间隔最大。 是一种监督学习算法,主要用于分类,也可用于回归 与逻辑回归和决策树等其…

Android摄像头Camera2和Camera1的一些总结

Android 系统对摄像头的同时使用有限制,不能同时使用摄像头进行预览或者录制音视频。 例如:界面上有两个SurfaceView, 这两个SurfaceView不能同时预览或者录制音视频,只能有一个正常工作(一个SurfaceView预览前置摄像头&#xff…