Vue3兄弟组件之间传值-mitt

news2024/12/27 9:53:22

Vue3兄弟组件之间传值-使用mitt插件

环境vue3+ts+vite

1.安装mitt
在终端cd到项目目录运行

npm install mitt

安装成功在package.json文件会有显示

2.在main.js里面全局引用

// An highlighted block
import mitt from 'mitt'
app.config.globalProperties.$mitt = mitt()

在这里插入图片描述
3.此时我的文件目录结构是这样的,news.vue作为发送数据的一方,about.vue作为接收数据的一方
在这里插入图片描述
news里面定义了一个money的变量,值为100,通过点击发送给about组件
new.vue代码:
在这里插入图片描述
about.vue代码:
在这里插入图片描述

当在news.vue点击发送数据时,about页面是可以打印出res的值是100,但是页面渲染的地方不会显示值,这两个页面此时不存在兄弟关系,
但是在home.vue 同时引用news和about页面此时它们为兄弟组件,就可以渲染出值

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/785676.html

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

相关文章

低代码开源项目汇总

低代码是基于可视化和模型驱动理念,结合云原生与多端体验技术,它能够在多数业务场景下实现大幅度的提效降本,为专业开发者提供了一种全新的高生产力开发范式。 不定期汇总更新一些低代码开源项目。 1、Appsmith Appsmith 是一款开源低代码…

根据UIL下载图片/视频、根据URL自动下载图片/视频、GUI自动下载想要的图片

1,根据UIL下载图片/视频 def downForInterface(file_path):count 1value_rows []with open(file_path, encodingUTF-8) as file:f_csv csv.reader(file)for r in f_csv:value_rows.append(r)for file_path in value_rows:cunmulu if . in file_path[0]:print(cu…

Java毕业设计-汽车出租系统【含源码、论文】

前言 汽车出租管理系统: 随着当今社会科学技术的高速发展,人民的生活水平不断的提高,自由行也开始盛行。有些人为了方便,选择汽车租赁的方式出行,因此汽车租赁成为一个极具市场潜力的行业。面对日趋发展的租赁市场&a…

有向图的强联通分量-SCC-Tarjan算法

有向图的强联通分量(SCC)Tarjan算法 强连通分量(Strongly Connected Components,SCC)的定义是:极大的强连通子图。 下图中,子图{1,2,3,4}为一个强连通分量,因为顶点1,2,3,4两两可达。{5},{6}也分别是两个强…

B2B2C多商户跨境电商购物网站搭建(后台采集功能)

如何部署开发一个B2B2C开源多语言多商户跨境外贸网站 随着全球化的发展,跨境外贸成为了许多企业拓展业务的重要方向。搭建一个B2B2C跨境外贸网站,将有助于实现企业的全球化经营。那么如何搭建一个B2B2C跨境外贸网站呢? 一、选择合适的开源平…

安科瑞智能照明控制系统的应用发展需求-安科瑞黄安南

【摘 要】 :随着电力电子技术的快速发展,智能照明控制技术已经成为楼宇自动化控制系统的重要组成部分,是绿色照明的发展方向。智能照明控制系统在照明节能上起到重要的作用。文章结合实际案例,探讨了智能照明控制技术在照明节能上…

OK3588的NPU加速推理resnet18—rknn_toolkit_lite2的Python语言篇

OK3588的NPU加速推理MobileNet——Python语言篇 Rknn_toolkit_lite2Miniconda安装创建虚拟环境并运行NPU加速推理代码注释 Rknn_toolkit_lite2 RKNN Toolkit Lite2 主要用于 RKNN 模型在 Rockchip NPU 上的部署。 在使用 RKNN Toolkit Lite2 之前,用户需要先通过 R…

LeetCode:面试题:消失的数字——时间复杂度

题目:数组nums中包含0~n的所有整数,但其中缺失了一个数,请写代码找出那个缺失的整数,要求在时间复杂度为O(N)的时间内完成 思路1:冒泡排序遍历(下一个数不等于上一个数1&#xff0c…

Mybatis中 #{} 和 ${} 的区别,SLQ注入

#{}:预编译处理,类似于占位符。${}:字符直接替换 预编译处理:Mybatis在处理#{}时候,会将SQL中的#{}转换为?,使⽤ PreparedStatement 的 set ⽅法来赋值。 直接替换:是MyBatis 在处理 ${} 时,就是…

浏览器调试Android App

浏览器调试Android App 1. 背景2. 调试工具3. 手机设置4. 打开浏览器(edge)5. 连接手机6. 点击inspect 开始调试 1. 背景 在工作中经常会遇到在原生app中嵌套h5, 但是在某些需要在app里面调试的内容, 却没有像chrome开发者工具这样的工具来帮助我们快速…

PDF文件转换成word软件有哪些?分享两个文件格式转换软件

在日常办公中,我们经常使用各种办公软件,其中PDF和Word是最常见的两种格式。相较于Word文件,PDF文件具有更强的兼容性和安全性,因此我们通常会选择以PDF格式分享文件。然而,如果我们需要提取PDF文件中的部分内容&#…

VPP编译安装及测试

参考:FD.io VPP环境下运行用户应用程序教程 环境 操作系统:centos7.4,且需要联网VPP版本:2009网卡:10G VPP编译 使用git clone VPP项目指定分支的代码(注意:不要使用VPP的release版本包&…

设计模式-职责链模式在Java中使用示例-采购审批系统

场景 采购单分级审批 采购审批是分级进行的,即根据采购金额的不同由不同层次的主管人员来审批,主任可以审批5万元以下(不包括5万元) 的采购单,副董事长可以审批5万元至10万元(不包括10万元)的…

基于C语言的哈夫曼转化软件

完整资料进入【数字空间】查看——baidu搜索"writebug" 该软件可实现如下功能: 用户可以通过点击“打开文件”按钮打开本地计算机中任意一个文本文件,点击确认将其文本导入到程序输入文本框中,也可以直接在文本框中通过键盘键入文…

502 Bad GateWay报错的解决方法

什么是502 bad gateway 报错 简单来说 502 是报错类型代码 bad gateway 错误的网关。是Web服务器作为网关或代理服务器时收到无效的响应。 用我们的口语说就是运行网站的服务器暂时挂了(不响应)。 产生错误的原因 1.连接超时 我们向服务器发送请求 由于服务器当前链接太多&am…

js设置一个定时器,定时发送请求

1.setTimeout方式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </he…

整流电路设计

一、交直流电区别 交流电&#xff1a;一般指大小和方向都随时间作周期性变化的电压或电流。交流电的极性在一个周期内变换多次&#xff0c;而直流电则保持恒定。 直流电&#xff08;电压或电流&#xff09;&#xff1a;直流电的方向不随时间而变化。直流电通常又分为恒定电压…

【Linux命令200例】chmod设置文件或目录的访问权限

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜活的实操案例对各个命令进行深入…

Python获取接口数据

首先我们需要下载python&#xff0c;我下载的是官方最新的版本 3.8.3 其次我们需要一个运行Python的环境&#xff0c;我用的是pychram&#xff0c;需要库的话我们可以直接在setting里面安装 代码&#xff1a; # -*- codeing utf-8 -*- from bs4 import BeautifulSoup # 网页…

Stable Diffusion生成艺术二维码

Stable Diffusion生成艺术二维码 文章会有浏览问题&#xff0c;点击此处查看原文 首先需要一个Stable Diffusion服务环境&#xff0c;《Stable Diffusion服务环境搭建&#xff08;远程服务版&#xff09;》如果你已经有了那就忽略 一、准备一个比较好的二维码底图 首先解析二…