vue3+ts 兄弟组件之间传值

news2025/4/6 0:26:47

父级:

<template>
  <div>
    <!-- <A @on-click="getFlag"></A>
    <B :flag="Flag"></B> -->
    <A></A>
    <B></B>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import A from "./components/A.vue";
import B from "./components/B.vue";
// const Flag = ref(false);
// const getFlag = (params: boolean) => {
//   Flag.value = params;
// };
</script>
 

<style></style>

A组件:

<template>
  <div class="A">
    <button @click="emitB">派发一个事件</button>
  </div>
</template>

<script setup lang="ts">
// const emit = defineEmits(["on-click"]);
import  Bus  from  '../bus';

let flag = false;
const emitB = () => {
  flag = !flag;
  // emit("on-click", flag);
  Bus.emit('on-click',flag);
};


</script>

<style>
.A{
  width: 200px;
  height: 200px;
  color: #fff;
  background: blue;
}
</style>

B组件:

<template>
    <div class="B">
    <h1>B组件</h1>
    {{Flag}}
     </div>
</template>
  
<script setup lang='ts'>
import  Bus  from  "../Bus";
import  {ref} from  "vue";
let  Flag=ref(false);
Bus.on('on-click',(flag:boolean)=>{
  Flag.value=flag;
})
  // type  Props={
  //     flag:boolean
  // }
  // defineProps<Props>();

</script>
  
<style>
  .B{
    width:200px;
    height: 200px;
    color:#fff;
    background: red;
  }
</style>

Bus.ts:

type BusClass = {
    emit: (name:string) => void,
    on:(name:string,callback:Function)=>void
}

type Pramskey = string | number | symbol;

type List = {
    [key:Pramskey]:Array<Function> 
}

class Bus implements BusClass{
    list: List
    
    constructor() {
        this.list={}
    }
    emit(name: string,...args:Array<any>) {
        let evenentName:Array<Function> = this.list[name];
        evenentName.forEach(fn => {
            fn.apply(this,args)
        })
    
    }

    on(name:string,callback:Function) {
        let fn:Array<Function> = this.list[name] || [];
        fn.push(callback);
        this.list[name] = fn;
    }


}

export default new Bus();

效果图:

在这里插入图片描述

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

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

相关文章

【教学类-06-12】20231126 (一)二位数 如何让加减乘除题目从小到大排序(以1-20之间加法为例,做正序排列用)

结果展示 优化后 优化前 背景需求&#xff1a; 生成列表 单独抽取显示题目排序方法 存在问题: 我希望 00 01 02……这样排序&#xff0c;但是实际上&#xff0c;除了第一个加数会从小到大排序&#xff0c;第二个被加数的第十位数和个位数都会从小到大排序&#xff0c;也就是…

【电路笔记】-快速了电阻

电阻类型 文章目录 电阻类型1、概述2、电阻器的组成类型2.1 碳电阻器2.2 薄膜电阻器2.3 绕线电阻器 3、总结 电阻器是所有电子元件中最基本、最常用的元件&#xff0c;人们几乎认为电阻器是理所当然的&#xff0c;但它们在电路中起着至关重要的作用。 1、概述 有许多不同类型的…

2018年2月26日 Go生态洞察:2017年Go用户调查结果分析

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

使用JS脚本刷点击率

使用JS脚本刷点击率 1.使用谷歌浏览器&#xff0c;登录国开平台&#xff0c;打开《管理学基础》课程导学的“学什么”&#xff0c;保证看得到右下角的“下一个”&#xff0c;然后在“下一个”右键点检查。 2.复制以下JS代码&#xff0c;在右上角“Console”标签&#xff08;…

C语言基础介绍

1. C语言基础知识 C语言是一种计算机编程语言&#xff0c;是一门用于编写系统软件和应用软件的高级语言。C语言的基础知识包括&#xff1a; 数据类型&#xff1a;C语言中的数据类型包括整型、浮点型、字符型等。 变量&#xff1a;C语言中使用变量来存储数据&#xff0c;变量必…

全球SAR卫星大盘点与回波数据处理专栏目录

近年来&#xff0c;随着商业航天的蓬勃发展&#xff0c;商业SAR卫星星座成为美欧等主要航天国家的发展重点&#xff0c;目前已在全球范围内涌现出众多初创公司进军商业SAR领域&#xff0c;开始构建大规模商业微小SAR卫星星座&#xff0c;其所具有的创新服务能力将为传统的商业遥…

【Android】Android Framework系列--Launcher3各启动场景源码分析

Android Framework系列–Launcher3各启动场景源码分析 Launcher3启动场景 Launcher3是Android系统提供的默认桌面应用(Launcher)&#xff0c;它的源码路径在“packages/apps/Launcher3/”。 Launcher3的启动场景主要包括&#xff1a; 开机后启动&#xff1a;开机时&#xff…

摄像馆服务预约管理系统会员小程序作用是什么

摄像馆不少人并不会经常去&#xff0c;除了有拍婚纱照或工作照等&#xff0c;一般很少会进店&#xff0c;但由于摄像涵盖多个服务项目&#xff0c;因此总体来讲&#xff0c;市场需求度还是比较高的&#xff0c;一个城市也有多个品牌&#xff0c;而传统门店经营也面临不少痛点。…

网络篇---第一篇

系列文章目录 文章目录 系列文章目录前言一、HTTP 响应码有哪些?分别代表什么含义?二、Forward 和 Redirect 的区别?三、Get 和 Post 请求有哪些区别?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男…

可燃气体监测仪助力燃气管网安全监测,效果一览

城市地下管线是指城市范围内供应水、排放水、燃气等各类管线及其附属设施&#xff0c;它们是保障城市正常运转的重要基础设施且影响着城市生命线。其中燃气引发的事故近些年不断增加&#xff0c;由于燃气管线深埋地下环境复杂&#xff0c;所以仅仅依赖人工巡查难以全面有效地防…

STM32-SPI3控制MCP3201、MCP3202(Sigma-Delta-ADC芯片)

STM32-SPI3控制MCP3201、MCP3202&#xff08;Sigma-Delta-ADC芯片&#xff09; 原理图手册说明功能方框图引脚功能数字输出编码与实值的转换分辨率设置与LSB最小和最大输出代码&#xff08;注&#xff09; 正负符号寄存器位MSB数字输出编码数据转换的LSB值 将设备输出编码转换为…

linxu磁盘介绍与磁盘管理

df (disk free) 列出文件系统的整体磁盘使用量 df -h du &#xff08;desk used&#xff09; 检查磁盘空间使用量 du --help fdisk 用来磁盘分区 fdisk -l

FreeRTOS学习之路,以STM32F103C8T6为实验MCU(2-7:软件定时器)

学习之路主要为FreeRTOS操作系统在STM32F103&#xff08;STM32F103C8T6&#xff09;上的运用&#xff0c;采用的是标准库编程的方式&#xff0c;使用的IDE为KEIL5。 注意&#xff01;&#xff01;&#xff01;本学习之路可以通过购买STM32最小系统板以及部分配件的方式进行学习…

Blender学习--模型贴图傻瓜级教程

Blender 官方文档 1. Blender快捷键&#xff1a; 快捷键说明 按住鼠标滚轮&#xff1a;移动视角Tab&#xff1a;切换编辑模式和物体模式鼠标右键&#xff1a; 编辑模式&#xff1a; 物体模式&#xff1a; 其他&#xff1a; 2. 下面做一个球体贴一张纹理的操作 2.1 效果如下…

SpringCloud之Gateway(统一网关)

文章目录 前言一、搭建网关服务1、导入依赖2、在application.yml中写配置 二、路由断言工厂Route Predicate Factory三、路由过滤器 GatewayFilter案例1给所有进入userservice的请求添加一个请求头总结 四、全局过滤器 GlobalFilter定义全局过滤器&#xff0c;拦截并判断用户身…

JOSEF约瑟 过电流继电器 JL15-300/11 触点形式一开一闭 板前接线

系列型号 JL15-1.5/11电流继电器JL15-2.5/11电流继电器 JL15-5/11电流继电器JL15-10/11电流继电器 JL15-15/11电流继电器JL15-20/11电流继电器 JL15-30/11电流继电器JL15-40/11电流继电器 JL15-60/11电流继电器JL15-80/11电流继电器 JL15-100/11电流继电器JL15-150/11电流继电…

Python之内置函数和模块

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

Virtuoso layout如何改变原点坐标

这里提供两种改变原点坐标的方法&#xff1a; 1、virtuoso layout图形界面 如下图&#xff1a;通过Edit->Advanced->Move Origin移动原点位置&#xff08;默认在左下角&#xff09;。 2、在calibredrv中使用命令更改 set L1 [layout create xx.gds -dt_expand] $L1 mod…

Java之Collection和List接口

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

C语言编译过程再解析

多年以前,分析过编译过程,并写了一篇博客,现在对编译过程有了更广阔的认识,记录在此 编译过程 中的 链接与 编译 编译过程分为1. 预处理2. 编译3. 汇编4. 链接其中有 2个过程比较特殊,1. 编译2. 链接对于C程序来说,链接分为提前链接(静态链接)对应下图第1行运行时链接(动态链…