【Vue3】兄弟组件传参
1. 借助父组件传参
A 组件派发一个事件,修改 flag 的值,先传递给父组件,然后由父组件传递给 B 组件。
缺点:必须由 App.vue 处理中间逻辑。
A.vue
<template><div class="A"><h1>A组件</h1><button @click="emitB">派发一个事件</button></div>
</template><script setup lang="ts">
const emit = defineEmits(['on-click'])
let flag = false
const emitB = () => {flag = !flagemit('on-click', flag)
}
</script><style scoped>
.A {width: 200px;height: 200px;color: #fff;background: blue;
}
</style>
App.vue
<template><div><A @on-click="getFlag"></A><B :flag="Flag"></B></div>
</template><script setup lang="ts">
import A from './components/A.vue';
import B from './components/B.vue';
import { ref } from 'vue'
let Flag = ref<boolean>(false)
const getFlag = (flag:boolean) => {Flag.value = flag
}
</script><style scoped></style>
B.vue
<template><div class="B"><h1>B组件</h1>{{ flag }}</div>
</template><script setup lang="ts">
type Props = {flag: boolean
}
defineProps<Props>()</script><style lang="scss" scoped>
.B{width: 200px;height: 200px;color: #fff;background: red;
}
</style>

2. Event Bus
Event Bus(事件总线)是一种在Vue中实现组件间通信的模式。它使用了Vue实例作为中央的事件中心,允许任何组件注册监听器并触发事件。通过事件总线,兄弟组件之间可以进行解耦合的通信。
原理是利用了 JavaScript 设计模式的发布-订阅(Publish-Subscribe Pattern),然后由事件调度中心(Event Loop)进行处理。
// Bus.tstype BusClass = {emit: (name: string) => voidon: (name: string, callback: Function) => void
}type PramsKey = string | number | symboltype List = {[key: PramsKey]: Array<Function>
}class Bus implements BusClass {list: Listconstructor() {this.list = {}}emit(name: string, ...args:Array<any>): void {let eventName: Array<Function> = this.list[name]eventName.forEach(fn =>{fn.apply(this, args)})}on(name: string, callback: Function): void {let fn:Array<Function> = this.list[name] || []fn.push(callback)this.list[name] = fn}
}
export default new Bus()
<!-- A.vue -->
<template><div><h1>A组件</h1><button @click="emitB">派发一个事件</button><hr></div>
</template><script setup lang="ts">
import Bus from '../Bus'
let flag = false
const emitB = () =>{flag = !flagBus.emit('on-click', flag)
}
</script><style scoped></style>
<!-- B.vue -->
<template><div><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
})</script><style scoped></style>
<!-- App.vue -->
<template><div><A></A><B></B></div>
</template><script setup lang="ts">
import A from './components/A.vue'
import B from './components/B.vue'</script><style scoped></style>

相关文章:
【Vue3】兄弟组件传参
1. 借助父组件传参 A 组件派发一个事件,修改 flag 的值,先传递给父组件,然后由父组件传递给 B 组件。 缺点:必须由 App.vue 处理中间逻辑。 A.vue <template><div class"A"><h1>A组件</h1>…...
【CSS 中 link 和@import 的区别】
<link> 和 import 都可以用于引入 CSS 文件,但是两者有以下区别: 加载时间:<link> 标签在页面加载时同时加载,而 import 是在页面加载后才开始加载。 兼容性:<link> 标签可以被所有的浏览器正确解释…...
笔记二:odoo搜索、筛选和分组
一、搜索 1、xml代码 <!--搜索和筛选--><record id"view_search_book_message" model"ir.ui.view"><field name"name">book_message</field><field name"model">book_message</field><field…...
Ubuntu Zookeeper开机自启动服务
1、创建service文件 在/lib/systemd/system目录下创建zookeeper.service文件 [Unit] DescriptionApache Zookeeper server Documentationhttp://zookeeper.apache.org Requiresnetwork.target remote-fs.target Afternetwork.target remote-fs.target[Service] Typesimple Env…...
关于Matlab与Python中日期转时间戳不一致的问题
由于 Matlab 中的日期序列号精确到秒,而 Python 的时间戳精确到秒,因此在进行转换时可能会存在精度损失,导致转换结果不完全相同。 将 Python 中的时间戳转换为 Matlab 中的日期序列号,可以使用下方代码进行转换: de…...
【Django 笔记】第一个demo
1. pip 安装 2. django 指令 D:\software\python3\anconda3\Lib\site-packages\django\bin>django-adminType django-admin help <subcommand> for help on a specific subcommand.Available subcommands:[django]checkcompilemessagescreatecachetabledbshelldiff…...
算法通过村第十一关-位运算|白银笔记|高频题目
文章目录 前言1. 位移的妙用1.1 位1的个数1.2 比特位计算1.3 颠倒无符号整数 2. 位实现加减乘除专题2.1 位运算实现加法2.2 递归乘法 总结 前言 提示:他不是不想多明白些,但是每每在该用脑子的时候,他用了感情。 --老舍《黑白李》 与位运算和…...
04、EL和JSTL核心技术
目录 1 EL表达式(熟悉) 1.1 基本概念 1.2 主要功能 1.3 访问内置对象的数据 1.3.1访问方式 1.3.2 执行流程 1.4 访问请求参数的数据 1.5 访问Bean对象的属性 1.5.1 访问方式 1.5.2 主要区别 1.6 访问集合中的数据 1.7 常用的内置对象 …...
【LeetCode热题100】--148.排序链表
148.排序链表 对链表进行排序最适合的算法就是归并排序: 对链表自顶向下归并排序的过程: 找到链表的中点,以中点为分界,将链表拆分成两个子链表,寻找链表的中点可以使用快慢指针的做法,快指针每次移动 2步…...
分布式并行训练(DP、DDP、DeepSpeed)
[pytorch distributed] 01 nn.DataParallel 数据并行初步 数据并行 vs. 模型并行 数据并行:模型拷贝(per device),数据 split/chunk(对batch切分) 每个device上都拷贝一份完整模型,每个device分…...
Linux- fg命令 bg命令
fg fg是Unix-like操作系统(如Linux和macOS)中的一个shell内建命令,用于将后台作业带到前台执行。这个命令常用于与bg(后台执行)命令和jobs(列出当前作业)命令一起,进行shell中的作业…...
leetcode第362场周赛
2873. 有序三元组中的最大值 I 核心思想:由于这题数据范围比较小,直接枚举i,j,k即可。 2874. 有序三元组中的最大值 II 核心思想:这题是在2873题目的基础上将数据范围进行了增加,意味着我们需要对上面的代码进行优化。两种优化方…...
图神经网络GNN(一)GraphEmbedding
DeepWalk 使用随机游走采样得到每个结点x的上下文信息,记作Context(x)。 SkipGram优化的目标函数:P(Context(x)|x;θ) θ argmax P(Context(x)|x;θ) DeepWalk这种GraphEmbedding方法是一种无监督方法,个人理解有点类似生成模型的Encoder过程…...
多目标平衡优化器黏菌算法(MOEOSMA)求解CEC2020多模式多目标优化
多目标平衡优化器黏菌算法(MOEOSMA)比现有的多目标黏菌算法具有更好的优化性能。在MOEOSMA中,动态系数用于调整勘探和开采趋势。采用精英存档机制来促进算法的收敛性。使用拥挤距离法来保持Pareto前沿的分布。采用平衡池策略模拟黏菌的协同觅…...
快速开发微信小程序之一登录认证
一、背景 记得11、12年的时候大家一窝蜂的开始做客户端Android、IOS开发,我是14年才开始做Andoird开发,干了两年多,然后18年左右微信小程序火了,我也做了两个小程序,一个是将原有牛奶公众号的功能迁移到小程序&#x…...
Mybatis配置文件(mybatis-config.xml)和Mapper映射文件(XXXMapper.xml)模板
配置文件 ${dirver} ---> com.mysql.jdbc.Driver ${url} ---> jdbc:mysql://localhost:3306/数据库名 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""h…...
4. 条件查询
首先区分下match,match_phrase,term, 参考:https://zhuanlan.zhihu.com/p/592767668?utm_id0 1、全量查询分页指定source 示例:请求地址为http://127.0.0.1:9200/students/_search,请求体为: {"query":…...
【VIM】初步认识VIM-2
2-6 Vim 如何搜索替换_哔哩哔哩_bilibili 1-6行将self改成this 精确替换quack单词为交...
《HelloGitHub》第 90 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 https://github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等,涵盖多种编程语言 …...
Apache Hudi初探(五)(与flink的结合)--Flink 中hudi clean操作
背景 本文主要是具体说说Flink中的clean操作的实现 杂说闲谈 在flink中主要是CleanFunction函数: Overridepublic void open(Configuration parameters) throws Exception {super.open(parameters);this.writeClient FlinkWriteClients.createWriteClient(conf,…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
