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

eventBus使用遇到的坑

**问题:**通过eventBus传递的参数,在子组件的methods中无法通过this.使用。
**思路:**考虑组件方法的执行顺序(vue生命周期执行顺序)
**解决办法:**在传递参数的组件外 this.$nextTick

this.$nextTick(() => {Bus.$emit('updateOpt', opt, item)
})

eventBus的使用

  1. 创建eventBus.js文件
  2. 在需要传递消息的兄弟组件引入该js文件
  3. 传递消息 bus.$emit(“test”,param1,param2…)
  4. 接收消息 bus.$on(“test”,funciton({ //逻辑 }))

代码如下:

<!-- 父组件 -->
<template><div><a></a><b></b></div>
</template><script>
import a from "./ePassList/a.vue";
import b from "./ePassEdit/b.vue";
export default {components: {a,b,},
}
</script><style></style>
//eventBus.js文件
import Vue from 'vue'export default new Vue()
<!-- 子组件a 传递消息import Bus from "../eventBus.js"; Bus.$emit('updateOpt', opt, item) -->
<template><div><el-table :data="dataList" size="small" v-loading="loading" border :header-cell-style="{color: '#495060','background-color': '#f8f8f9',}" style="border: 1px solid #dddee1"><el-table-column type="index" label="序号" width="90" align="center"></el-table-column><el-table-column prop="activity_name" label="活动名称" align="center"></el-table-column><el-table-column prop="activity_type" label="活动类型" align="center"></el-table-column><el-table-column prop="activity_publisher" label="发布人" align="center"></el-table-column><el-table-column prop="insert_time" label="发布时间" align="center"></el-table-column><el-table-column prop="update_time" label="更新时间" align="center"></el-table-column><el-table-column prop="action" label="操作" align="center" fixed="right"><el-row slot-scope="scope"><Button type="primary" size="small" @click="operate('editOpt', scope.row)">编辑</Button><Button type="primary" size="small" @click="operate('detailOpt', scope.row)">详情</Button><Button type="primary" size="small" @click="onDelete(scope.row)">删除</Button></el-row></el-table-column></el-table></div>
</template><script>
import Bus from "../eventBus.js";
export default {methods: {//编辑,详情operate(opt, item) {console.log(opt, item);this.$emit('toEdit')this.$nextTick(() => {Bus.$emit('updateOpt', opt, item)})},}
};
</script><style></style>
<!-- 子组件b 接收消息import Bus from "../eventBus.js"; Bus.$on("updateOpt", () => {}); -->
<template></template><script>
import Bus from "../eventBus.js";
export default {data() {return {operate: "",rowData: "",}},created() {Bus.$on("updateOpt", (opt, item) => {console.log(opt, item, 11111);this.operate = opt;this.rowData = item;});},methods:{print(){console.log(this.operate,this.rowData)}}
};
</script><style></style>

涉及到的知识点:nextTick()

nextTick(),是将回调函数延迟在下一次DOM更新数据过后进行调用。
简单的理解就是:当数据更新之后,DOM进行渲染之后将会自动进行执行该函数。
详细解读链接:https://juejin.cn/post/6971017407733170184

相关文章:

eventBus使用遇到的坑

**问题&#xff1a;**通过eventBus传递的参数&#xff0c;在子组件的methods中无法通过this.使用。 **思路&#xff1a;**考虑组件方法的执行顺序&#xff08;vue生命周期执行顺序&#xff09; **解决办法&#xff1a;**在传递参数的组件外 this.$nextTick this.$nextTick(() …...

ChatGPT应用|科大讯飞星火杯认知大模型场景创新赛开始报名了!

ChatGPT发布带来的 AI 浪潮在全球疯狂蔓延&#xff0c;国内掀起的大模型混战已经持续半年之久&#xff0c;国产大模型数量正以惊人的速度增长&#xff0c;据不完全统计&#xff0c;截止7月14号已经达到了111个&#xff0c;所谓的“神仙打架”不过如此了吧。 &#xff08; 包括但…...

DM8 DSC备份还原

1、检查磁盘空间 检查服务器磁盘空间使用情况&#xff0c;确认磁盘有充足的空间存放物理备份。 查看磁盘空间使用情况&#xff08;备份在端点0&#xff0c;此处检查端点0&#xff09; su - dmdba [dmdbacentos-04 ~]$ df -h 文件系统 容量 已用 可用 已用% …...

【Docker--harbor私有仓库部署与管理】

目录 一、Harbor 部署1. 部署 Docker-Compose 服务2. 部署 Harbor 服务&#xff08;1&#xff09;下载或上传 Harbor 安装程序&#xff08;2&#xff09;修改harbor安装的配置文件 3. 启动 Harbor4. 查看 Harbor 启动镜像5. 创建一个新项目1、在虚拟上进行登录 Harbor2、下载镜…...

基于量子同态加密的安全多方凸包协议

摘要安全多方计算几何(SMCG)是安全多方计算的一个分支。该协议是为SMCG中安全的多方凸包计算而设计的。首先&#xff0c;提出了一种基于量子同态加密的安全双方值比较协议。由于量子同态加密的性质&#xff0c;该协议可以很好地保护量子电路执行过程中数据的安全性和各方之间的…...

MySQL案例——多表查询以及嵌套查询

系列文章目录 MySQL笔记——表的修改查询相关的命令操作 MySQL笔记——MySQL数据库介绍以及在Linux里面安装MySQL数据库&#xff0c;对MySQL数据库的简单操作&#xff0c;MySQL的外接应用程序使用说明 文章目录 系列文章目录 前言 一 创建数据库 1.1 创建一个部门表 1.…...

AI 视频清晰化CodeFormer-Deepfacelab

CodeFormer 概述 (a) 我们首先学习一个离散码本和一个解码器&#xff0c;通过自重建学习来存储人脸图像的高质量视觉部分。(b) 使用固定的码本和解码器&#xff0c;我们引入了一个用于代码序列预测的 Transformer 模块&#xff0c;对低质量输入的全局人脸组成进行建模。此外&a…...

TCP协议如何实现可靠传输

TCP最主要的特点 TCP是面向连接的运输层协议&#xff0c;在无连接的、不可靠的IP网络服务基础之上提供可靠交付的服务。为此&#xff0c;在IP的数据报服务基础之上&#xff0c;增加了保证可靠性的一系列措施。 TCP最主要的特点&#xff1a; TCP是面向连接的输出层协议 每一条…...

万恶的Eclipse的使用

恨啊&#xff01;公司用eclipse&#xff0c;这种千年老古董又被翻出来了&#xff0c;我的idea&#xff0c;我的宝&#xff0c;我想你&#xff01; 下面是总结的各种eclipse的使用技巧&#xff1a; 让eclipse像idea一样使用 .sout eclipse设置自动保存代码&#xff08;图文&…...

文件上传--题目

之前有在技能树中学过文件上传&#xff0c;正好借这次进行一个整合&#xff1a; 技能树中所包含的题目类型有 无限制绕过 1.上传一句话木马 2.链接中国蚁剑 前端验证 1.会发现这个网站不让提交php&#xff0c;改后缀为jpg格式&#xff0c;再用burp抓包 2.在用中国蚁剑连接 .…...

小程序创建

1&#xff0c;下载HBuilder X ;(3.8.7) HBuilderX-高效极客技巧 2,下载模板&#xff08;不选云服务的&#xff09;&#xff1b; 3&#xff0c;运行-运行到小程序模拟器&#xff1b; 4&#xff0c;安装小程序开发工具&#xff1b; 5&#xff0c;选择稳定版-windows64版&…...

stable diffusion如何确保每张图的面部一致?

可以使用roop插件&#xff0c;确定好脸部图片后&#xff0c;使用roop固定&#xff0c;然后生成的所有图片都使用同一张脸。 这款插件的功能简单粗暴&#xff1a;一键换脸。 如图所示&#xff1a; 任意上传一张脸部清晰的图片&#xff0c;点击启用。 在其他提示词不变的情况下…...

保存Windows锁屏壁纸

原链接 1. 点击爱心 我保存过了,所以没有爱心了. 2. 打开本地文件夹 用户改成自己的 C:\Users\86186\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets 3. 复制这些文件到其他目录 我这个不知道咋的,操作完文件夹过1会就被…...

面向对象编程:深入理解内部类与抽象类的使用

文章目录 一、内部类使用&#xff1a;1.1 成员内部类&#xff1a;1.1.1 成员内部类的主要特点是&#xff1a; 1.2 局部内部类&#xff1a;1.2.1 局部内部类的主要特点是&#xff1a;1.2.2 局部内部类通常用于以下情况&#xff1a; 1.3 静态内部类&#xff1a;1.3.1 静态内部类的…...

linux安装oracle

oracle安装 基于linux系统安装 Linux安装oracle12C Centos7.6 内存8GB 硬盘&#xff1a;50GB 可视化图形界面 yum groupinstall "GNOME Desktop" -y 可视化后续安装命令 1、软件环境包安装 yum -y install binutils compat-libcap1 compat-libstdc-33 gcc-c glib…...

切面 基于Aspect注解自动切面, 省下注解判断逻辑 handler

父文章 spring aop 切面配置_aop 切面设置.**_个人渣记录仅为自己搜索用的博客-CSDN博客 【Spring AOP】Aspect结合案例详解&#xff08;一&#xff09;: Pointcut使用annotation 五种通知Advice注解&#xff08;已附源码&#xff09;_pointcut annotation_天罡gg的博客-CSDN博…...

golang,gin框架的请求参数(一)--推荐

golang&#xff0c;gin框架的请求参数&#xff08;一&#xff09; gin框架的重要性不过多的强调&#xff0c;重点就gin使用中的参数传递&#xff0c;获取进行梳理文件&#xff0c;满足使用需求。 获取前端请求参数的几种方法&#xff1a; 一、获取参数【浏览器地址获取参数】…...

ardupilot 遥控的输入控制模式

目录 本节主要记录自己整理ardupilot的遥控器的输入控制模式:正常模式、简单模式、超简单模式的理解。 1.正常模式(有头模式) 在不用简单和超简单的模式的情况下,无人机操作员操作的控制输入是对应着不断旋转着的飞行器进行操作的。如上方图所示举例,当无人机操作员进行…...

Unity UGUI的StandaloneInputModule (标准输入模块)组件的介绍及使用

Unity UGUI的StandaloneInputModule (标准输入模块)组件的介绍及使用 1. 什么是StandaloneInputModule组件&#xff1f; StandaloneInputModule是Unity UGUI系统中的一个标准输入模块组件&#xff0c;用于处理鼠标和键盘的输入事件。它可以将鼠标和键盘的输入转化为UGUI系统中…...

惠普HP Color Laser 150a开机红色感叹号闪烁不打印故障解决方法

故障描述&#xff1a; 惠普HP Color Laser 150a开机红色感叹号闪烁&#xff0c;不能打印&#xff0c;电脑提示C3-6140。 检测分析&#xff1a; 在解决C3-6140错误代码之前&#xff0c;我们需要先检查打印机是否连接正常。如果打印机连接不正常&#xff0c;也可能会出现这个错误…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...