vue2.0的小坑——当Element UI 中的el-dialog包含子组件时,refs报undefind的问题

<el-dialog
   title="提示"
   :visible.sync="dialogCreate"
   width="30%"
   @open="look()"
   :before-close="handleClose">
    <app-form ref="appForm" v-bind:row="row" v-bind:isCreate="isCreate" v-bind:dialogCreate = "dialogCreate" v-on:success="success(res)"></app-form>

</el-dialog>

对于vue有一定了解的都知道,当父组件要调用子组件的方法时,可以在子组件的引用上写上ref,比如

<app-form ref="appForm">app-form>

这样我们就可以在父组件的methods中直接调用一个方法(假设子组件的methods中有一个方法 test() ):

this.$refs.appForm.test();

这样就可以运行了

但时当把这个子组件放到Element Ui中的 el-dialog 中 ,再像上面这样写是会报undefind的,可能生成组件的顺序会有影响,于是我们可以用一个延时函数来改变执行队列:

handleEdit(index,row){
    this.dialogCreate = true;
    setTimeout(() => {
        this.$refs.appForm.test();
    },0)
 },

这样就OK了。

你可能感兴趣的:(vue)