1. 程式人生 > >vue2.0的小坑——當Element UI 中的el-dialog包含子元件時,refs報undefind的問題

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了。