el-dialog弹窗的@open方法中,第一次引用ref发现undefined问题,第二次后面又正常了

解决方法

直接不用这个@open方法,转而用@opened,代码例子:

<el-dialog title="单个新增" :visible.sync="PlacardShowSingle" @opened="openpbSingle()" width="1100px" top="1%" :close-on-click-modal="false">
    <div style="margin:20px; margin-top: -20px;">
        <PbscheduleSingle ref="PbscheduleSingle"></PbscheduleSingle>
    </div>
</el-dialog>

方法例子:

//弹窗完全挂载dom后再调用
openpbSingle() {
    // 调用PbscheduleSingle组件的方法QueryPublishNumberQuantity
    this.$refs.PbscheduleSingle.QueryPublishNumberQuantity(); 
},

情况大致是:

1.第一次打开没调用组件内部方法,发现是undefined,@open 在对话框打开之前触发,并且ref="PbscheduleSingle",这个ref没挂载在dom,自然无法获取到相应的方法。

2.第二次打开,由于第一次打开,ref已经挂载在dom了,所以一切又正常了

  1. @opened 在对话框完全打开之后触发,组件已经完全挂载,所以不会出现undefined的错误。

还有其他方法可以解决,但是这个应该是最简洁明了的吧。

相关推荐
2401_882726481 小时前
BY组态-低代码web可视化组件
前端·物联网·低代码·前端框架·web
万维——组态1 小时前
BY组态-低代码web可视化组件
前端·物联网·低代码·编辑器·流程图·组态
小黄编程快乐屋1 小时前
npm操作大全:从入门到精通
前端·npm·node.js
OpenTiny社区1 小时前
TinyEngine v2.1版本发布:全新的区块方案和画布通信方案,打造更强力的可拓展低代码引擎
前端·低代码·开源·opentiny
轻口味1 小时前
【HarmonyOS NAPI 深度探索7】N-API 数据处理:与 JavaScript 数据的交互
javascript·c++·交互·harmonyos·napi·harmonyos-next
用户380235599002 小时前
[快速入门:利用LangChain与百度千帆平台进行对话模型集成]
前端
黑客老陈3 小时前
基于 Electron 应用的安全测试基础 — 提取和分析 .asar 文件
运维·服务器·前端·javascript·网络·electron·xss
几道之旅3 小时前
RPA编程实践:Electron实践开始
javascript·electron·rpa
yqcoder3 小时前
electron 获取本机 ip 地址
前端·javascript·electron