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

唐某霖2025-01-20 0:03

解决方法

直接不用这个@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了，所以一切又正常了

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

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