vue2.0的小坑——當Element UI 中的el-dialog包含子元件時,refs報undefind的問題
阿新 • • 發佈:2019-02-12
<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了。