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

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

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

相关文章

Spring 类型安全的配置属性

使用 Value("${property}") 注解来注入配置属性有时会很麻烦&#xff0c;特别是当你要处理多个属性或你的数据是分层的。 Spring Boot提供了一种处理属性的替代方法&#xff0c;让强类型的Bean管理和验证你的应用程序的配置。 另请参见Value 和类型安全配置属性之间的…

Android 面试题 避免OOM(内存优化)三

&#x1f525; OOM介绍&#xff08;out of memory 内存溢出&#xff09;&#x1f525; Android和java中都会出现由于不良代码引起的内存泄露&#xff0c;为了使Android应用程序能够快速高效的运行&#xff0c;Android每个应用程序都会有专门Dalvik虚拟机实例来运行&#xff0c;…

【机器学习】机器学习中的“本体”概念

一、说明 在机器学习中&#xff0c;本体越来越多地用于提供基于相似性分析和场景知识的 ML 模型。 在传统的基于标签的定义中&#xff0c;对象往往是孤立的&#xff0c;可扩展性差&#xff0c;存在重复的可能性&#xff0c;对象之间的关系无法体现。在基于本体的定义中&#xf…

4_Apollo4BlueLite电源管理

1.Cortex-M4 Power Modes Apollo4BlueLite支持以下4种功耗模式&#xff1a; ▪ High Performance Active (not a differentiated power mode for the Cortex-M4) ▪ Active ▪ Sleep ▪ Deep Sleep &#xff08;1&#xff09;High Performance Mode 高性能模式不是arm定…

【深度学习】以图搜索- 2021sota repVgg来抽取向量 + facebook的faiss的做特征检索, 从环境搭建到运行案例从0到1

文章目录 前言安装小试牛刀用repVgg抽取向量构建Faiss索引进行相似性搜索本项目延伸其它项目拓展总结 前言 Faiss的全称是Facebook AI Similarity Search。 这是一个开源库&#xff0c;针对高维空间中的海量数据&#xff0c;提供了高效且可靠的检索方法。 暴力检索耗时巨大&a…

最全的3D动画软件介绍来了!良心总结9款3D动画制作必备软件

现在&#xff0c;市面上流行着的3D动画软件如此之多&#xff0c;以至于很难敲定到底哪一款更适合自己或自己的团队。本篇文章带来了一些热门的、被视为行业标准的3D动画软件的介绍&#xff0c;帮助您更好地做出选择。 不仅如此&#xff0c;您还能从文章中了解到在数字内容创建…

html/javascript-表格的创建和使用

html中表格的创建和使用 一 摘要二 使用html table标签创建表格&#xff08;在html文件中&#xff09;三 使用javascript创建表格&#xff08;在js文件中&#xff09;四 表格属性的设置&#xff1a;4.1. 右边框的设置&#xff1a;4.2. 只给表格单元格加右边框4.3. 动态设置右边…

费舍尔线性分辩分析(Fisher‘s Linear Discriminant Analysis, FLDA)

费舍尔线性分辩分析(Fisher’s Linear Discriminant Analysis, FLDA) 目录 费舍尔线性分辩分析(Fishers Linear Discriminant Analysis, FLDA)1. 问题描述2. 二分类情况3. 多分类情况4. 代码实现4.1 二分类情况4.2 多分类情况 5. 参考资料 1. 问题描述 为解决两个或多个类别的…

PS - Photoshop 抠图与剪贴蒙版功能与 Stable Diffusion 重绘

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/131978632 Photoshop 的剪贴蒙版是一种将上层图层的内容限制在下层图层的形状范围内的方法&#xff0c;也就是说&#xff0c;上层图层只能在下层图…

【备战csp-j】 csp常考题型详解(1)

一.计算机基础知识 1. 微型计算机的问世是由于( ) 的出现。 A.中小规模集成电路 B.晶体管电路 C.(超)大规模集成电路 D.电子管电路 答案&#xff1a; C 解析&#xff1a; 年代 元件 第一代 1946&#xff0d;1958 电子管 第二代 1959&#xff0d;1964 晶体管 …

32.选择器

选择器 html部分 <div class"toggle-container"><input type"checkbox" id"good" class"toggle"><label for"good" class"label"><div class"ball"></div></label&…

云原生训练营课程大纲

第一部分&#xff1a;Go 语****言基础 模块一&#xff1a;Go 语言特性 教学目标&#xff1a; 理解 Go 语言基本语法 理解 Go 语言常用数据类型 理解 Go 语言常用小技巧 深入理解 Go 语言的多线程编程 针对的用户痛点&#xff1a; 云原生从业者因为未熟练掌握 Go 语言&#…

bash sh 和 ./ 的区别

bash&#xff1a; 这是Bash shell的解释器。当你使用bash script.sh运行脚本时&#xff0c;你是在告诉系统使用Bash解释器来执行脚本。这意味着脚本中的所有Bash特性都可以使用。 sh&#xff1a; 这是Bourne shell的解释器。当你使用sh script.sh运行脚本时&#xff0c;你是在告…

HTML的基础知识

HTML&#xff08;超文本标记语言&#xff09;是一种用于创建网页的标记语言。它提供了一套标记&#xff08;标签&#xff09;和元素&#xff08;元素&#xff09;的规范&#xff0c;用于描述网页结构和内容的呈现方式。HTML 文件是由一系列的标签组成&#xff0c;这些标签用于定…

uni-app云打包(android)(自有证书、云端证书、公共测试证书)

一、进入云打包入口 发行->原生App-云打包 二、证书选择 1、使用自有证书 ①进入香蕉云编&#xff08;这里采用的证书从香蕉云编进行生成&#xff09; 香蕉云编-app打包上架工具类平台 ②进入页面选择“生成签名证书”->"立即创建证书" ③选择“安卓证书生…

数字人会成为文旅行业的新增量吗?写实数字人定制包含哪些技术?

近年来&#xff0c;各大文旅机构均在围绕数字人展开了文旅营销创作&#xff0c;凭借着写实数字人定制技术&#xff0c;将数字人的人设、功能以及才艺得到创新&#xff0c;并由此在文旅形态上展开了诸多尝试。 比如会唱山歌多才多艺的数字人刘三姐&#xff0c;使用多种语言推介…

OrderApplication

目录 1 OrderApplication 2 /// 获提交订单页面数据 2.1.1 //设置会员信息 2.1.2 //获取订单商品信息 2.1.3 //获取收货地址 2.1.4 //发票信息 OrderApplication#region web公共方法

windows环境下adb 下载和配置,连接手机。

ADB下载地址&#xff1a; https://adbdownload.com/ 选择下载windows系统的。 下载后解压&#xff0c;查看adb.exe所在的目录&#xff0c;如下 这里将路径复制下来&#xff1a;D:\ADB 配置到系统环境变量中。 然后再打开cmd&#xff0c;输入adb version查看版本。 出现…

ThinkPHP8知识详解:ThinkPHP8是什么?

欢迎你来到PHP服务网学习最新的ThinkPHP8开发教程&#xff0c;本文介绍一下ThinkPHP8是什么&#xff1f; 1、ThinkPHP8是ThinkPHP框架的最新版本&#xff0c;它在之前版本的基础上进行了改进和优化。它采用了现代化的设计理念和架构&#xff0c;提供了更好的性能和更丰富的功能…

【机器学习】Linear Regression

Model Representation 1、问题描述2、表示说明3、数据绘图4、模型函数5、预测总结附录 1、问题描述 一套 1000 平方英尺 (sqft) 的房屋售价为300,000美元&#xff0c;一套 2000 平方英尺的房屋售价为500,000美元。这两点将构成我们的数据或训练集。面积单位为 1000 平方英尺&a…