当前位置: 首页 > 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

http://www.lryc.cn/news/97840.html

相关文章:

  • ChatGPT应用|科大讯飞星火杯认知大模型场景创新赛开始报名了!
  • DM8 DSC备份还原
  • 【Docker--harbor私有仓库部署与管理】
  • 基于量子同态加密的安全多方凸包协议
  • MySQL案例——多表查询以及嵌套查询
  • AI 视频清晰化CodeFormer-Deepfacelab
  • TCP协议如何实现可靠传输
  • 万恶的Eclipse的使用
  • 文件上传--题目
  • 小程序创建
  • stable diffusion如何确保每张图的面部一致?
  • 保存Windows锁屏壁纸
  • 面向对象编程:深入理解内部类与抽象类的使用
  • linux安装oracle
  • 切面 基于Aspect注解自动切面, 省下注解判断逻辑 handler
  • golang,gin框架的请求参数(一)--推荐
  • ardupilot 遥控的输入控制模式
  • Unity UGUI的StandaloneInputModule (标准输入模块)组件的介绍及使用
  • 惠普HP Color Laser 150a开机红色感叹号闪烁不打印故障解决方法
  • CVE-2023-1454注入分析复现
  • MFC使用png做背景图片
  • Java开发的基石:JDK
  • 使用langchain与你自己的数据对话(三):检索(Retrieval)
  • DEVICENET转ETHERNET/IP网关devicenet协议
  • GPT一键化身「AI助理」——自定义指令功能
  • 深入理解Promise
  • 【2023 年第二届钉钉杯大学生大数据挑战赛】 初赛 B:美国纽约公共自行车使用量预测分析 问题三时间序列预测Python代码分析
  • redis-cluster 创建及监控
  • vue+ivew model框 select校验遇到的问题
  • mybatis_分页