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了,所以一切又正常了
3. @opened 在对话框完全打开之后触发,组件已经完全挂载,所以不会出现undefined的错误。
还有其他方法可以解决,但是这个应该是最简洁明了的吧。