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

【vue3】子传父-事件总线-mitt(子组件派发事件,父组件接收事件和传递的参数)

安装库:cnpm install mitt

封装 eventbus.ts:

src->utils->eventbus.ts

//eventbus.tsimport mitt from 'mitt'const emitter = mitt()export default emitter

使用

B2.vue:

//B2.vue
<template><div class="aa"><p>子组件B</p><input v-model="info.name"><br><input v-model="info.age"><br><el-button type="primary" @click="emitB">派发一个事件</el-button></div>
</template><script setup lang='ts'>
import { ref } from 'vue'
import emitter from '../utils/eventbus';type tinfo = {name: string,age: number
}
const info = ref<tinfo>({ name: 'yyx', age: 12 })const emitB = () => {emitter.emit('on-click', info.value)
}</script>
<style scoped lang='scss'>
div {width: 400px;min-height: 300px;text-align: center;border: 1px solid #ccc;position: relative;
}
</style>

parent.vue:


//parent.vue
<template><div><p>这是父级</p><span>==================================</span><B2></B2><C2 :info="_info"></C2></div>
</template><script setup lang='ts'>
import { ref } from 'vue'
import emitter from '../utils/eventbus';
import B2 from '../components/B2.vue';
import C2 from '../components/C2.vue';let _info = ref<unknown>(null)emitter.on('on-click',(val)=>{_info.value = val
})</script>
<style scoped lang='scss'></style>

C2.vue:


//C2.vue
<template><div>组件3333333<p>name:{{ props?.info?.name }}</p><p>age:{{ props?.info?.age }}</p></div>
</template><script setup lang='ts'>type tprops = {info?: any //有个问号?,是可选的参数,父组件在饮用的时候,可以不传
}
const props = withDefaults(defineProps<tprops>(), {info:{name:'张三',age:20}
})</script><style scoped lang='scss'>
div {width: 400px;min-height: 300px;text-align: center;border: 1px solid #ccc;
}
</style>

相关文章:

【vue3】子传父-事件总线-mitt(子组件派发事件,父组件接收事件和传递的参数)

安装库&#xff1a;cnpm install mitt 封装 eventbus.ts&#xff1a; src->utils->eventbus.ts //eventbus.tsimport mitt from mittconst emitter mitt()export default emitter使用 B2.vue&#xff1a; //B2.vue <template><div class"aa">…...

【杂记】java 大集合进行拆分

日常中需要对一个大的集合进行拆分成多个小集合&#xff0c;其主要思路为&#xff1a; 设置需要拆分多少个小集合 A大集合里面有多少条数据 B计算出每个集合里面有多个条数据 CB/A计算出看是否存在余数 DB%A采用集合(List.subList())的方法对大集合进行拆分,循环A变进行集合拆…...

select...for update 锁表了?

在MySQL中&#xff0c;事务A中使用select...for update where id1锁住了&#xff0c;某一条数据&#xff0c;事务还没提交&#xff0c;此时&#xff0c;事务B中去用select ... where id1查询那条数据&#xff0c;会阻塞等待吗&#xff1f; select...for update在MySQL中&#…...

使用ControlNet生成视频(Pose2Pose)

目录 ControlNet 介绍 ControlNet 14种模型分别是用来做什么的 ControlNet 运行环境搭建 用到的相关模型地址 ControlNet 介绍 ControlNet 是一种用于控制扩散模型的神经网络结构&#xff0c;可以通过添加额外的条件来实现对图像生成的控制。它通过将神经网络块的权重复制到…...

基于Docker使用Minikube

1. 查看并操控Minikube状态信息 Minikube相当于docker中的一个container&#xff0c;可以在Docker Desktop中看到并操控Minikube container的相关状态&#xff1a; 通过以下命令查看当前docker中的container&#xff1a; % docker ps CONTAINER ID IMAGE …...

Stable Diffusion系列(一):古早显卡上最新版 WebUI 安装及简单操作

文章目录 Stable Diffusion安装AnimateDiff插件适配sdxl模型适配 Stable Diffusion使用插件安装界面设置基础文生图加入lora的文生图 Stable Diffusion安装 我的情况比较特殊&#xff0c;显卡版本太老&#xff0c;最高也就支持cuda10.2&#xff0c;因此只能安装pytorch1.12.1&…...

ruoyi框架前端vue部署生产环境教程

前端有子目录&#xff0c;后端有项目名称&#xff0c;请看第3种 第1种 前端nginx没有子目录&#xff0c;后端也没有访问的项目名。这种是最简单的。 vue.config.js 只需要修改target中的IP和端口&#xff0c;就是后端访问的IP和端口 # vue.config.js devServer: {host: 0.…...

leetcode第369周赛

2917. 找出数组中的 K-or 值 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 nums 中的 K-or 是一个满足以下条件的非负整数&#xff1a; 只有在 nums 中&#xff0c;至少存在 k 个元素的第 i 位值为 1 &#xff0c;那么 K-or 中的第 i 位的值才是 1 。 返回 nums …...

如何在维格云中自动新增一行或多行数据?

简介​ 在日常使用维格云中,通常会出现一张表中有数据发生变化时,需要另一张表同时新增一些数据,比如: 项目管理中,每新增一个项目,都要在任务表中产生若干个固定的任务;或一个任务要自动生成若干子任务当一笔订单状态变为成交后,可能要在客户成功表中新增一行记录;帮…...

Three.js 开发引擎的特点

Three.js 是一个流行的开源 3D 游戏和图形引擎&#xff0c;用于在 Web 浏览器中创建高质量的三维图形和互动内容。以下是 Three.js 的主要特点和适用场合&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作…...

k8s声明式资源管理方式

Kubernetes 支持 YAML 和 JSON 格式管理资源对象 JSON 格式&#xff1a;主要用于 api 接口之间消息的传递 YAML 格式&#xff1a;用于配置和管理&#xff0c;YAML 是一种简洁的非标记性语言&#xff0c;内容格式人性化&#xff0c;较易读 YAML 语法格式&#xff1a; ●大小写…...

unity性能优化__Statistic状态分析

在Unity的Game视图右上角&#xff0c;我们会看到有Stats选项&#xff0c;点击会出现这样的信息 我使用的Unity版本是2019.4.16 一、Audio&#xff0c;顾名思义是声音信息 1&#xff1a;Level:-74.8dB 声音的相对强度或音量。通常&#xff0c;音量级别以分贝&#xff08;dB&a…...

Linux Spug自动化运维平台公网远程访问

文章目录 前言1. Docker安装Spug2 . 本地访问测试3. Linux 安装cpolar4. 配置Spug公网访问地址5. 公网远程访问Spug管理界面6. 固定Spug公网地址 前言 Spug 面向中小型企业设计的轻量级无 Agent 的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主机在线终端、文件…...

3DES算法

简介 本文基于.NET的C#实现3DES算法的加密和解密过程。可以用在加密软件、加密狗等。 代码下载链接&#xff1a;https://download.csdn.net/download/C_gyl/88487942 使用 第一种方法 加密 KeySize&#xff1a;128(16字节)&#xff0c;192&#xff08;24字节&#x…...

手机电池寿命检测

安卓 - 应用商店下载“安兔兔” -accubattery 下载地址 accubattery汉化版下载-Accubattery pro中文免费版(电池检测)下载 v1.5.11 安卓专业版-IT猫扑网...

Vue项目搭建及使用vue-cli创建项目、创建登录页面、与后台进行交互,以及安装和使用axios、qs和vue-axios

目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css&#xff08;css.txt&#xff09; 2.3 配置路由 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2…...

AVL树、红黑树的介绍和实现[C++]

本文主要对AVL树和红黑树的结构和实现方法进行一定的介绍&#xff0c;仅实现部分接口。 目录 一、AVL树 1.AVL树的概念 2.AVL树节点的定义 3.AVL树的插入 4.AVL树的旋转 1. 新节点插入较高左子树的左侧——左左&#xff1a;右单旋 2. 新节点插入较高右子树的右侧——右…...

meta分析的异质性检验指标如何计算?

一、什么是异质性&#xff1f; 广义&#xff1a;描述参与者、干预措施和一系列研究间测量结果的差异和多样性&#xff0c;或那些研究中内在真实性的变异。 狭义&#xff1a;统计学异质性&#xff0c;用来描述一系列研究中效应量的变异程度&#xff0c;也用于表明除仅可预见的…...

如何在mac 安装 cocos 的 android环境

基本概念&#xff1a; Java: Java 是一种编程语言&#xff0c;由Sun Microsystems&#xff08;现在是 Oracle Corporation&#xff09;开发。Java 是一种跨平台的语言&#xff0c;可以用于开发各种应用程序&#xff0c;包括 Android 应用程序。Android 应用程序的核心代码通常用…...

作为网工有必要了解一下什么是SRv6?

什么是SRv6&#xff1f; 【微|信|公|众|号&#xff1a;厦门微思网络】 【微思网络http://www.xmws.cn&#xff0c;成立于2002年&#xff0c;专业培训21年&#xff0c;思科、华为、红帽、ORACLE、VMware等厂商认证及考试&#xff0c;以及其他认证PMP、CISP、ITIL等】 SRv6&…...

MiniCPM-V-2_6 Ubuntu 20.04一键部署教程:从安装到运行

MiniCPM-V-2_6 Ubuntu 20.04一键部署教程&#xff1a;从安装到运行 想试试那个能看懂图片还能跟你聊天的多模态大模型MiniCPM-V-2_6吗&#xff1f;很多朋友在第一步——部署上就被卡住了&#xff0c;不是环境依赖搞不定&#xff0c;就是权限问题报错&#xff0c;折腾半天模型还…...

ZGC停顿时间为何突然飙升?3个被90%团队忽略的配置雷区曝光

第一章&#xff1a;ZGC停顿时间为何突然飙升&#xff1f;3个被90%团队忽略的配置雷区曝光 ZGC&#xff08;Z Garbage Collector&#xff09;以亚毫秒级停顿著称&#xff0c;但生产环境中频繁出现 10–50ms 甚至更高停顿&#xff0c;往往并非内存压力所致&#xff0c;而是源于几…...

从服务暴露到语义裁剪:全面理解 SAP ABAP CDS projection view 的设计价值与实战用法

在很多 ABAP 开发者的直觉里,CDS view entity 已经足够强大:既能定义数据模型,也能承载丰富的语义注解,还能为 RAP、OData、分析场景提供统一的数据基础。可一旦进入真正的业务服务设计阶段,你很快就会发现,底层模型的完整能力,并不等于某个具体服务应该暴露给外部的能力…...

从仿真到实战:在CST/HFSS中如何设置周期性边界条件评估紧耦合天线阵元性能

从仿真到实战&#xff1a;在CST/HFSS中设置周期性边界条件评估紧耦合天线阵元性能 天线阵列设计中最具挑战性的环节之一&#xff0c;是如何准确预测单个阵元在阵列环境中的真实工作状态。当我在设计第一个超宽带相控阵时&#xff0c;曾因忽视阵元间互耦效应导致实物测试结果与仿…...

抖音批量下载神器:免费一键收藏创作者全部作品

抖音批量下载神器&#xff1a;免费一键收藏创作者全部作品 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖音…...

智能电网RAG优化:闭环协同与精准检索

RAG论文原理解析、公式含义与错误点对点修正方案 一、论文核心原理详细解析(含场景举例) 本文针对通用RAG框架在术语密集、强监管垂直领域(智能电网)的三大原生适配瓶颈,提出了** RAG领域原生闭环协同RAG范式**,核心是将智能电网领域知识嵌入检索-生成-评估全生命周期,…...

不止基础管理!国产 CRM 软件如何用数据分析赋能客户与销售工作

引言2026年国内企业数字化转型已进入深水区&#xff0c;CRM早已脱离了单纯的客户信息台账工具属性&#xff0c;数据分析能力成为衡量CRM产品价值的核心指标——从线索获客成本核算到跟单转化率优化&#xff0c;从客户复购价值挖掘到全链路风险管控&#xff0c;高质量的数据分析…...

CodeBlocks高效开发环境配置指南:从字体优化到智能编码

1. CodeBlocks开发环境基础配置 刚接触CodeBlocks时&#xff0c;我经常被默认的界面和功能搞得头晕眼花。经过多年实战&#xff0c;我发现合理的初始配置能让开发效率提升至少50%。我们先从最基础的视觉优化开始。 字体设置是影响编码舒适度的首要因素。默认的字体大小在1080p屏…...

无需模拟器!Windows运行安卓应用的革命性方案——APK-Installer轻量级安装工具全解析

无需模拟器&#xff01;Windows运行安卓应用的革命性方案——APK-Installer轻量级安装工具全解析 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在数字化办公与娱乐融…...

AXOrderBook:解密A股订单簿重建与FPGA硬件加速的深度技术方案

AXOrderBook&#xff1a;解密A股订单簿重建与FPGA硬件加速的深度技术方案 【免费下载链接】AXOrderBook A股订单簿工具&#xff0c;使用逐笔行情进行订单簿重建、千档快照发布、各档委托队列展示等&#xff0c;包括python模型和FPGA HLS实现。 项目地址: https://gitcode.com…...