非父子通信（扩展）-- event bus 事件总线
创建一个空实例Bus， export default 导出Bus
过程:由A组件对Bus组件进行监听，B组件触发Bus对应的事件，由于A组件进行监听，触发事件之后就会进行A组件的回调，那么就可以将消息发送给A了
在src文件夹下新建utils文件夹（工具类文件一般放在utils)，文件夹下新建EventBus.js文件
创建一个空vue实例 Bus:// 1.创建一个都能访问到的事件总线（空的 Vue实例） import Vue from 'vue' const Bus = new Vue() export default Bus // 导出事件总线,将来任何需要借助事件总线的地方都可以直接导入该文件B组件通过点击按钮触发Bus 实例传递消息：
<template><div class="base-b">我是B组件(发布方)<button @click="clickSendd">发布通知</button></div> </template><script> import Bus from '../utils/EventBus' export default {methods:{clickSend(){//3.B(发送方)触发事件的方式传递参数Bus.$emit('sendMsg','今日天晴')}} } </script><style> .base-b {background-color: white;width: 200px;height: 300px;text-align: center;line-height: 300px;border: 1px solid #000; }</style>A组件通过监听Bus实例，接收消息进行处理
在data中定义变量msg，将传过来的消息赋值给变量msg，然后进行页面显示
<template><div class="base-a">我是A组件(接收方)<p>{{msg}}</p></div> </template><script> import Bus from '../utils/EventBus' export default {created() {// 2.在A组件（接收方）进行监听Bus事件Bus.$on('sendMsg',(msg) => {this.msg = msg})},data(){return {msg:''}} } </script><style> .base-a {background-color: white;width: 200px;height: 300px;text-align: center;line-height: 300px;border: 1px solid black; }</style>
扩展：非父子通信
创建爷爷组件App.vue<template><div class="app">我是APP组件<button @click="change">修改数据</button><SonA></SonA><SonB></SonB></div> </template><script> import SonA from './components/SonA.vue' import SonB from './components/SonB.vue' export default {provide() {return {// 简单类型 是非响应式的color: this.color,// 复杂类型 是响应式的userInfo: this.userInfo,}},data() {return {color: 'pink',userInfo: {name: 'zs',age: 18,},}},methods: {change() {this.color = 'red'this.userInfo.name = 'ls'},},components: {SonA,SonB,}, } </script><style> .app {border: 3px solid #000;border-radius: 6px;margin: 10px; } </style>创建儿子组件SonA,其中调用孙子组件GrandSon
<template><div class="SonA">我是SonA组件<GrandSon></GrandSon></div> </template><script> import GrandSon from './GrandSon.vue' export default {components:{GrandSon} } </script><style> .SonA {border: 3px solid #000;border-radius: 6px;margin: 10px;height: 200px; } </style>创建另一个儿子组件SonB
<template><div class="SonB">我是SonB组件</div> </template><script> export default {} </script><style> .SonB {border: 3px solid #000;border-radius: 6px;margin: 10px;height: 200px; } </style>创建孙子组件GrandSon:
<template><div class="grandSon">我是GrandSon{{ color }} -{{ userInfo.name }} -{{ userInfo.age }}</div> </template><script> export default {inject: ['color', 'userInfo'], } </script><style> .grandSon {border: 3px solid #000;border-radius: 6px;margin: 10px;height: 100px; } </style>过程：将爷爷组件中要传递到孙子组件的数据写在provide方法里，孙子组件中通过 inject:[ ]接收
v-model原理 ：
v-model是不能跟props传过来的数据进行双向绑定的
//App.vue <template><div class="app"><HelloWorld:cityId="selectId"@changeId="selectId=$event"></HelloWorld></div> </template><script>import HelloWorld from './components/HelloWorld.vue'export default {data(){return{selectId:'102'}},components:{HelloWorld}} </script><style></style>//HelloWorld <template><div><select :value="cityId" @change="handleChange" ><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">深圳</option><option value="105">广州</option></select></div> </template><script> export default {props:{cityId:String},methods:{handleChange(e){// console.log(e.taget.value);this.$emit('changeId',e.target.value)}}} </script><style></style>
相关文章：
非父子通信（扩展）-- event bus 事件总线
创建一个空实例Bus， export default 导出Bus 过程:由A组件对Bus组件进行监听，B组件触发Bus对应的事件，由于A组件进行监听，触发事件之后就会进行A组件的回调，那么就可以将消息发送给A了 在src文件夹下新建utils文件夹&a…...
【Linux系列】获取当前目录
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
大模型：把GPT搬回家 - chatGPT的本地化API -Node.js调用
chatGPT拒绝了中国大陆和中国香港的访问，包括api的调用。这使得我们无法使用目前来讲确实YYLX的生产工具，仔细想一下其实还是可以曲线解决的，本文的介绍仅供学习参考。 用Node.jschatGPT提供的API，就可以在自己本地或者自己的服务…...
【Qt项目实战】使用脚本拓展CPP应用程序（2）——Lua脚本及编辑器
考古 《【Qt项目实战 】：使用脚本拓展CPP应用程序（1）——Lua脚本及编辑器》 一、LuaBridge 最近在项目的某个模块再次使用Lua作为程序拓展语言，开发了一些新的功能。 这里借助 LuaBridge 轻松实现Qt调用C类成员函数及成员对象等…...
【RBF SBN READ】hadoop社区基于RBF的SBN READ请求流转
读写分离功能的背景及架构 当前联邦生产集群的各个子集群只有Active NameNode在工作，当读写任务变得繁忙的时候，只有一个Active负责处理的话，此时集群的响应和处理能力业务侧感知会明显下降，为此，我们将引入Observer架构，实现读写功能的分离，使得Active只负责写请求，而…...
【教学类-36-08】20241210对称蝴蝶——去白边（图案最大化）一大和一大二小
背景需求 前期制作了对称蝴蝶，用来涂色，幼儿很喜欢 【教学类-36-07】20230707三只对称蝴蝶（midjounery-niji）（涂色、裁剪、游戏（飞舞的蝴蝶））_对称图案涂色-CSDN博客文章浏览阅读49…...
Flume——sink连接hdfs的参数配置（属性参数+时间参数）
这可不是目录 配置文件官网说明属性参数时间参数 配置文件官网说明 可以参考官网的说明 属性参数 属性名称默认值说明channel-type-组件类型名称，必须是hdfshdfs.path-HDFS路径，例如：hdfs://mycluster/flume/mydatahdfs.filePrefixFlumeDa…...
lc字符串相加——模拟
415. 字符串相加 - 力扣（LeetCode） 不准调用封装好的那些库。手动模拟两数相加，记录进位。主要当其中短的数字计算完了怎么办，技巧为下标为负数时就当做0，相当于补0一样。 class Solution {public String addStrings…...
框架建设实战6——缓存组件
说起分布式缓存，如今redis大行其道。不过，我们在创建缓存组件时，需要着重考虑如下几点： 1.客户端选型 本组件基于springboot2的默认实现，即lettuce客户端。不同客户端区别如下： 名称描述 优缺点分析 jedis1.springboot1.5.*默认 2.老牌客户端，使用稳定…...
基于springboot使用Caffeine
Caffeine 是一个基于 Java 的高性能、现代化的缓存库。它由 Ben Manes 开发，受 Google Guava 缓存库的启发，但具有更好的性能和更多的功能。 Caffeine 的核心特点 高性能 基于 Java 8 的现代化设计，利用高级并发算法，提供极低的延…...
深入解析 JavaScript 中的 Blob 对象：二进制数据处理的核心
文章目录 1.Blob是什么2.Blob用法实例属性Blob方法slice方法text方法 示例1：字符串 Blob示例2：数组和字符串 Blob示例3：从文件输入创建 3.使用场景1.创建 Blob 并生成 URL，下载文件2.文件上传3.切片上传3.Blob用于URL在线预览PDF文…...
fastboot
Fastboot 是 Android 和嵌入式开发中常见的一个低级工具，它允许通过 USB 与设备直接交互，用于分区的管理和系统的刷写等任务。以下是其工作原理和核心机制的解析： 1. Fastboot 的基本概念 Fastboot 是一种通信协议，通常在设备的引…...
yosys内部数据结构
一、参考链接 1.Yosys内部结构doxygen文件 yosys-master: RTLIL Namespace Reference 2.yosys内部结构介绍 https://yosyshq.readthedocs.io/projects/yosys/en/docs-preview-cellhelp/yosys_internals/formats/rtlil_rep.html 二、概览 图 1 网表核心数据结构 如图 1所示…...
前端导出excel实战(xlsx库和exceljs库）
一. 概览 前端导出excel是比较常见的需求，比如下载excel模板和批量导出excel。目前比较常用的库有xlsx和excel，接下来就着两种方式进行梳理。 二. 下载模板 xlsx库实现： 示例核心代码如下： const excelColumn {details: {ma…...
TCP/IP杂记
TCP三次握手、四次挥手 从应用角度，不用多考虑为什么有三次，遵循标准即可。 ubuntu 下 wireshark安装： sudo add-apt-repository universe sudo apt install wireshark 三次握手实证： 第一次握手的情况如下：&#…...
深入解析 Spring Security —— 打造高效安全的权限管理体系
目录 前言1. 初识 Spring Security1.1 Spring Security 的两大核心功能1.2 Spring Security 的主要特点 2. 配置 Spring Security2.1 配置类概述2.2 基础配置示例2.3 示例解析 3. Spring Security 的进阶功能3.1 自定义用户服务3.2 注解式权限控制3.3 动态权限控制 4. 实战应用…...
PostGIS分区表学习相关
在Postgresql中对空间数据进行表分区的实践_postgresql空间数据-CSDN博客文章浏览阅读1.4k次，点赞26次，收藏21次。Postgresql的分区功能允许将一个大表按照特定的规则拆分成多个小的分区表。这样做的好处在于，在查询数据时，可以只…...
避大坑！Vue3中reactive丢失响应式的问题
在vue3中,我们定义响应式数据无非是ref和reactive。 但是有的小伙伴会踩雷！导致定义的响应式丢失的问题。 reactive丢失响应式的情况1（直接赋值） 场景: 1.你定义了一个数据:let datareactive({name:"",age:"" }) 2.然后你…...
绿虫光伏设计系统：清洁能源的未来
煤炭、石油、天然气是我们现在依赖的重要能源，但这些能源难以再生，而且开采过程中会产生污染。太阳能发电作为清洁能源的一种重要形式，受到了越来越多的关注。绿虫光伏发电系统，不仅考虑到其发电效率，还可以考虑其经济…...
Python中的文件操作与数据处理
一、前言 文件操作是数据处理和持久化存储的基础。Python内置了强大的文件操作能力，并提供了丰富的库支持复杂数据处理需求。本文将从基础的文件读写到高效的数据处理，带您全面掌握Python文件操作技能。 二、文件操作基础 1. 文件的读写 # 写入文件 with open("examp…...
在huggingface.co的Spaces中推理，得到错误：No space left on device
如果你的前几次或者上一次推理运行成功了，或者至少GPU加载过了，导致你这次问题的原因可能是某种缓存文件太大 删除它试试，如果你的推理没有在运行，这不影响任何东西 rm -rf /data-nvme/zerogpu-offload/如果有帮助，请…...
el-table expand-row-keys默认展开，数据更新后默认展开的问题
开发项目时遇到个问题，菜单展开后，刷新数据，再次点击收起按钮不好用了，要点两次才好使，解决方案如下： 1、table设置 <el-table:loading"load":data"menuDataList":load"load…...
Linux下redis环境的搭建
1.redis的下载 redis官网下载redis的linux压缩包，官网地址:Redis下载 网盘链接： 通过网盘分享的文件：redis-5.0.4.tar.gz 链接: https://pan.baidu.com/s/1cz3ifYrDcHWZXmT1fNzBrQ?pwdehgj 提取码: ehgj 2.redis安装与配置 将包上传到 /…...
海外的bug-hunters，不一样的403bypass
一种绕过403的新技术，跟大家分享一下。研究HTTP协议已经有一段时间了。发现HTTP协议的1.0版本可以绕过403。于是开始对lyncdiscover.microsoft.com域做FUZZ并且发现了几个403Forbidden的文件。 （访问fsip.svc为403） 在经过尝试后࿰…...
使用 EasyExcel 提升 Excel 处理效率
目录 前言1. EasyExcel 的优点2. EasyExcel 的功能3. 在项目中使用 EasyExcel3.1 引入依赖3.2 实体类的定义与注解3.3 工具类方法的实现3.4 在 Controller 中使用 4. 总结5. 参考地址 前言 在日常开发中，Excel 文件的处理是不可避免的一项任务，特别是在…...
驱鸟器自定义播放音乐，低成本语音方案选型-N9305九芯电子
一、开发背景： 随着农业现代化的不断推进，鸟类对农作物的侵扰问题愈发严重。传统的驱鸟方法，如人工驱赶或使用化学药剂，不仅效率低下，而且可能对环境造成污染。因此，开发一种高效、环保、低成本的驱鸟器成…...
【html css选择器】
在 CSS 中，你可以通过选择器来选择 HTML 元素，并为其设置样式。以下是一些常见的 CSS 选择器和样式设置方法： 1. 基本选择器 元素选择器：选择特定的 HTML 元素。 p {color: blue;font-size: 16px; }类选择器：选择具有…...
mongoDb的读session和写session权限报错问题
go在使用mongoDb时用到了全局会话，发现在创建的session的逻辑相同，首先会进行数据的查询，此时获取了全局session执行读操作，查询所有文档，则当前会话为读会话，当再去插入时发现会报错，此时sessi…...
如何避免缓存击穿？超融合常驻缓存和多存储池方案对比
作者：SmartX 解决方案专家 钟锦锌 很多运维人员都知道，混合存储介质配置可能会带来“缓存击穿”的问题，尤其是大数据分析、数据仓库等需要频繁访问“冷数据”的应用场景，缓存击穿可能会更频繁地出现，影响业务运行。除…...
c语言专题之单链表的实现
在之前的博客中小编已经讲解了顺序表及其应用，所以在将讲单链表之前，我们先来重新思考一下顺序表，这里我先来讲顺序表的几个小缺点： 1.顺序表中在我们数据时，如头插、在指定位置插入等，我们通常需要整体挪动…...
Spring 源码学习（七）——注解后处理器
通过之前对注解式配置的解析（Spring 源码学习（三）—— 注解式配置解析_spring源码学习-CSDN博客）可以发现其使用 AnnotationConfigUtils 类的 registerAnnotationConfigProcessors 静态方法对象注解后处理器对象进行注册ÿ…...
GEE训练教程——基于 Sentinel-1 数据对 Felső-Kiskunság 湖区的可视化分析
目录 简介 代码解释 代码 结果 简介 GEE训练教程——基于 Sentinel-1 数据对 Felső-Kiskunsg 湖区的可视化分析 此处打开后运行后直接在script界面上就可以输入指定的年份和月份，但不是GEE APP的运算，是直接在弹出的框内输入即可。 代码解释 以下是您提供的 Google …...
docker 相关操作
1. 以下是一些常见的 Docker 命令： docker --version显示安装的 Docker 版本。 docker pull <image_name>从 Docker Hub 或其他镜像仓库下载镜像。 docker build -t <image_name> <path>从指定路径的 Dockerfile 构建 Docker 镜像。 docker i…...
【汽车】-- 燃油发动机3缸和4缸
3缸和4缸燃油发动机是小轿车常见的发动机配置。以下从结构特点、性能、经济性等方面对两者进行对比，并分析优缺点及使用注意事项： 1. 结构与运行原理 3缸发动机 特点：少一个气缸，内部零部件更少，整体结构更紧凑。优点…...
Python - 处理包含非utf-8 的字符编码
有这样的字符串，utf-8 编码中包含 ascii 编码内容 你好\x0a\x0a哈哈s 你好\x0a\x0a哈哈 b s.encode(utf-8) b.decode(utf-8)其它尝试 >>> b s.encode(utf-8) >>> b.decode(ascii) Traceback (most recent call last):File "<stdin&g…...
)
主坐标分析(PCoA)
主坐标分析（PCoA）是一种多变量统计方法，用于研究样本间的相似性或差异性，是一种非约束性的数据降维分析方法。以下是PCoA的关键点和实施步骤： 什么是PCoA？ PCoA通过将样本距离矩阵转换为坐标，…...
Linux 网络接口配置
在 Linux 中，网络接口配置文件用于控制系统中的软件网络接口,并通过接口实现对网络设备的控制。当系统启动时,系统通过这些接口配置文件决定启动哪些接口，以及如此对这些接口进行配置. 在 Linux 中，网络接口配置文件用于控制系统中的软件网络接口，并通过这些接口实现对网络…...
Netty客户端接收不到服务端发送的数据问题
文章目录 前言问题描述相关代码解决方法 前言 环境 JDK：64位 jdk1.8.0_201 Netty：4.1.39.Final 问题描述 项目中使用Netty接受客户端的消息，客户端为硬件设备，在接受数据后发送数据到服务端。 同时因为客户端没有联网ÿ…...
基于多视角深度学习技术的乳腺X线分类：图神经网络与Transformer架构的研究|文献速递-生成式模型与transformer在医学影像中的应用速递
Title 题目 Mammography classification with multi-view deep learning techniques:Investigating graph and transformer-based architectures 基于多视角深度学习技术的乳腺X线分类：图神经网络与Transformer架构的研究 01 文献速递介绍 乳腺X线检查是乳腺癌…...
SCRM私域流量管理工具助力企业微信电商转型升级
内容概要 在当今数字化时代，SCRM（社交客户关系管理）私域流量管理工具正逐渐成为企业转型的重要助力。尤其是在电商领域，企业微信的兴起为许多公司打开了新的销售渠道，通过SCRM系统的高效整合，企业能够更加…...
PTA 输出三角形字符阵列
本题要求编写程序，输出n行由大写字母A开始构成的三角形字符阵列。 输入格式： 输入在一行中给出一个正整数n（1≤n<7）。 输出格式： 输出n行由大写字母A开始构成的三角形字符阵列。格式见输出样例，其中…...
纯血鸿蒙崛起，原生Android挑战？两大操作系统巅峰对决，智能设备未来谁主沉浮？
鸿蒙HarmonyOS和原生Android系统虽然在一些方面相似，但在架构、设计理念、API、开发工具等方面存在一些差异。鸿蒙系统的目标是跨设备、分布式的操作系统，强调多设备协同和资源共享，而Android则主要集中在智能手机和移动设备领域。 下面将从…...
书生实战营第四期-进阶岛第六关-MindSearch 快速部署
一、开发环境配置 1、打开codespace主页，选择Blank模板进行创建 Codespaces 2、创建conda环境隔离并安装依赖 conda create -n mindsearch python3.10 -y conda init 因为是新建的codespace，在第一次创建conda环境时，需要conda init 然后再…...
【Cadence32】PCB多层板电源、地平面层创建心得➕CM约束管理器Analyze分析显示设置➕“DP”报错DRC
【转载】Cadence Design Entry HDL 使用教程 【Cadence01】Cadence PCB Edit相对延迟与绝对延迟的显示问题 【Cadence02】Allegro引脚焊盘Pin设置为透明 【Cadence03】cadence不小心删掉钢网层怎么办？ 【Cadence04】一般情况下Allegro PCB设计时的约束规则设置&a…...
华东理工大学2001年数据结构与程序设计试题
华东理工大学2001年数据结构与程序设计试题 一、单选题(10分) 1．若某线性表中最常用的操作是在最后一个元素之后插入一个元素和删除第一个元素，则采用——存储方式最节省运算时间。 A．单链表 B．仅有头指针的单循环链表 Cÿ…...
WebRTC 的核心：RTCPeerConnection
WebRTC 的核心：RTCPeerConnection WebRTC 的核心：RTCPeerConnection 创建 RTCPeerConnection 对象RTCPeerConnection 与本地音视频数据绑定媒体协商ICE 什么是 Candidate？收集 Candidate交换 Candidate尝试连接 SDP 与 Candidate 消息的互换…...
Spring Boot 中 WebClient 的实践详解
在现代微服务架构中，服务之间的通信至关重要。Spring Boot 提供了 WebClient，作为 RestTemplate 的替代方案，用于执行非阻塞式的 HTTP 请求。本文将详细讲解 WebClient 的实践，包括配置、使用场景以及常见的优化策略，帮…...
OceanBase 社区版 4.0 离线方式升级bp1至bp2 指南（含避坑总结）
注：目前社区版对 4.0 升级 bp1至 bp2也未有完善的文档，本次升级中也是遇到不少坑，写本文也希望对OB感兴趣的可以尝试少些遇坑。 也希望对升级有更好方式建议方式的朋友一起切磋交流，以便再进一步完善升级方案。 第一次做OB的升级&…...
@ControllerAdvice 的实现原理
从源码角度分析 Spring Boot 中 ControllerAdvice 的实现原理 在 Spring Boot 开发中，ControllerAdvice 是一个非常强大的特性，允许开发者集中处理控制器中的异常、全局数据绑定和模型属性。本文将从源码的角度探讨 ControllerAdvice 的实现原理&#x…...
将当前cad图中实体复制到另一个新的dwg的块中，并插入块——CAD c#实现
本案例为：将当前cad图中实体复制到另一个cad的块中，并插入块。 目前代码尚未调试成功，找bug中...... public class Demo {[CommandMethod("xx1")]public void XXA(){// 获取当前文档和数据库Document currentDoc Application.Doc…...