【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>

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

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

相关文章

idea + Docker-Compose 实现自动化打包部署(仅限测试环境)

一、修改docker.service文件&#xff0c;添加监听端口 vi /usr/lib/systemd/system/docker.service ExecStart/usr/bin/dockerd -H fd:// --containerd/run/containerd/containerd.sock -H tcp://0.0.0.0:2375 -H unix://var/run/docker.sock重启docker服务 systemctl daemo…

邦盛科技冲刺上市“冷思考”:身处红线边缘,达摩克利斯之剑高悬

撰稿|行星 来源|贝多财经 近日&#xff0c;浙江邦盛科技股份有限公司&#xff08;下称“邦盛科技”&#xff09;因发行上市申请文件中记载的财务资料已过有效期&#xff0c;需要补充提交。根据相关规定&#xff0c;上海证券交易所中止其发行上市审核。 据介绍&#xff0c;邦…

下载zip源码并使用交叉编译工具进行编译

可以按照以下步骤进行操作&#xff1a; 确保已经设置好交叉编译工具链并将其添加到系统的环境变量中。 打开终端&#xff0c;进入你想要存放源码的目录&#xff1a; cd /path/to/source/directory使用git命令克隆zip库的源码仓库&#xff1a; git clone https://github.com/ni…

量变引起质变:安卓改多了,就是自己的OS

最近小米也发布了自己的OS&#xff0c;其他也有厂家跟进。这是自华为鸿蒙之后&#xff0c;大家都说自己开发OS。对此&#xff0c;也是有很多争论的。 有人说&#xff0c;这些东西不都是安卓套壳或者改名吗&#xff1f;怎么就变成了自己的OS&#xff1f;这种观点对不对呢&#x…

StartCoroutine/yield 返回模式在 Unity 中到底如何工作?

Unity3D协程详解 游戏中的许多过程都是在多个帧的过程中发生的。你有“密集”的过程&#xff0c;比如寻路&#xff0c;每个帧都努力工作&#xff0c;但会分成多个帧&#xff0c;以免对帧速率产生太大影响。您拥有“稀疏”进程&#xff0c;例如游戏触发器&#xff0c;它们在大多…

Shopee、Lazada卖家不得不看的提升销量技巧,自养号测评打造权重

近年来&#xff0c;大部分虾皮、Lazada卖家开始通过测评补单的方式来提升店铺权重和产品排名&#xff0c;以吸引更多流量。这种方式可以有效提高产品的销售转化率&#xff0c;对店铺的运营起到推动作用。然而&#xff0c;测评补单并非简单的购买过程&#xff0c;其中涉及到许多…

干洗店预约下单管理系统收衣开单拍照必备软件

随着生活水平的提高和节奏的加快&#xff0c;商务人士的衣物越来越多&#xff0c;但精力和时间却越来越少。于是&#xff0c;干洗店应运而生&#xff0c;在中国&#xff0c;几乎所有的中心城市干洗店都门庭若市。若每人每月需要干洗一套服装&#xff0c;一个城市每月则需干洗50…

面试中经常问道的问题二

深入理解前端跨域方法和原理 前言 受浏览器同源策略的限制&#xff0c;本域的js不能操作其他域的页面对象&#xff08;比如DOM&#xff09;。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使…

HTML5语义化标签 header 的详解

&#x1f31f;&#x1f31f;&#x1f31f; 专栏详解 &#x1f389; &#x1f389; &#x1f389; 欢迎来到前端开发之旅专栏&#xff01; 不管你是完全小白&#xff0c;还是有一点经验的开发者&#xff0c;在这里你会了解到最简单易懂的语言&#xff0c;与你分享有关前端技术和…

idea使用Alibaba Cloud Toolkit实现自动部署

在日常开发过程中&#xff0c;经常会使用到jenkins进行项目部署&#xff0c;但对一些小项目来说&#xff0c;这就过于复杂&#xff0c;就可以使用Alibaba Cloud Toolkit插件配合shell脚本进行项目的远程部署工作。 一、下载Alibaba Cloud Toolkit插件 二、服务器安装nohup 1.…

Kafka - 消息队列的两种模式

文章目录 消息队列的两种模式点对点模式&#xff08;Point-to-Point&#xff0c;P2P&#xff09;发布/订阅模式&#xff08;Publish/Subscribe&#xff0c;Pub/Sub&#xff09; 小结 消息队列的两种模式 消息队列确实可以根据消息传递的模式分为 点对点模式发布/订阅模式 这两…

Power BI 实现日历图,在一张图中展示天、周、月数据变化规律

《数据可视化》这本书里介绍了一个时间可视化的案例&#xff08;如下图所示&#xff09;&#xff0c;以日历图的形式展示数据的变化&#xff0c;可以在一张图上同时观察到&#xff1a;&#xff08;1&#xff09;每一天的数据变化&#xff1b;&#xff08;2&#xff09;随周变化…

创建个人github.io主页(基础版)//吐槽:很多国内教程已经失效了

一、就跟着官网教程来很快就好了 官方文档的教程 GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live. // 简单跑通为例&#xff0c;第一个链接直接能行了&#xff0c;如果不想…

超全整理,服务端性能测试-docker部署tomcat/redis(详细步骤)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、docker部署tom…

sql server 生成连续日期和数字

在sqlserver里&#xff0c;可以利用系统表master..spt_values里面存储的连续数字0到2047&#xff0c;结合dateadd&#xff08;&#xff09;函数生成连续的日期 select convert (varchar(10),dateadd(d, number, getdate()),23) as workday from master..spt_values where type…

全面分享‘’找不到msvcp140.dll无法继续执行代码修复教程

计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“msvcp140.dll缺失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题&#xff0c;我们需要找到合适的解决办法。本文将介绍5种解决msvcp140.dll缺失问题的方法&#xff0c;帮…

【Python】基于非侵入式负荷检测与分解的电力数据挖掘

文章目录 前言一、案例背景二、分析目标三、分析过程四、数据准备4.1 数据探索4.2 缺失值处理 五、属性构造5.1 设备数据5.2 周波数据 六、模型训练七、性能度量文末送书&#xff1a;《Python数据挖掘&#xff1a;入门、进阶与实用案例分析》 前言 本案例将根据已收集到的电力…

Phthon下载库函数

在代码中使用import tushare as ts导入时编译会报错找不到tushare&#xff0c;此时则表示本地没有相应的库函数包 打开安装python的目录&#xff0c;找到pip.exe文件目录&#xff0c;例如D:\Python\Python311\Scripts&#xff0c;文件夹右键->在终端打开&#xff0c;输入pi…

Linux部署Redis哨兵集群 一主两从三哨兵(这里使用Redis6,其它版本类似)

目录 一、哨兵集群架构介绍二、下载安装Redis2.1、选择需要安装的Redis版本2.2、下载并解压Redis2.3、编译安装Redis 三、搭建Redis一主两从集群3.1、准备配置文件3.1.1、准备主节点6379配置文件3.1.2、准备从节点6380配置文件3.1.3、准备从节点6381配置文件 3.2、启动Redis主从…

在Vue.js中使用xlsx组件实现Excel导出

在现代Web应用程序中&#xff0c;数据导出到Excel格式是一项常见的需求。Vue.js是一种流行的JavaScript框架&#xff0c;允许我们构建动态的前端应用程序。本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能。 1、项目设置 首先&#xff0c;在控制台执行以下命令安…