vue refs 在父元件中取到的原因

2021-08-31 23:30:10 字數 1446 閱讀 5348

之前ref來定位dom節點。但是期間遇到了乙個問題,就是在mounted(){}鉤子裡面使用this.$refs.***,在各別頁面中取不到列印出來的卻是undefined?;只知道是非同步問題用settimeout可以取,但是我不可能在每個方法裡要修改的時候都用這個方式;而且發現在mounted中用this.$nexttick也是取不到的;

取不到的原因:

mounted階段,dom結構準備就緒,但是這裡的準備就緒需要特別說明一下:

dom結構已經出來了,但是如果在dom結構中的某個dom節點使用了v-if、v-show或者v-for(即根據獲得的後台資料來動態操作dom,即響應式),那麼這些dom是不會再mounted階段找到的。

如:

0">

import loading from "@/common/loading";

export default ,

data() ;

},mounted()

};

此時的mounted階段,一般是用於發起後端請求,拿回資料,配合路由鉤子做一些事情,簡單來說就是在mounted鉤子中載入資料而已,載入回來的資料是不會再這個階段更新的dom中的

所以如果在mounted鉤子中使用$refs,如果ref是定位在有v-if、v-for、v-show中的dom節點,返回來的只能是undefined,因為在mounted階段他們根本不存在!!

經過檢驗,上面端文字是錯誤的,$refs定位不到的主要原因是因為v-if、v-for、v-show這些語句如果依賴父元件傳來的引數的話,該該引數是在mounted()階段子還沒獲取得到~~~~!!!!

如果想要真正地在dom載入完成後拿到資料,用settimeout(()=>{})

如果說mounted階段是載入階段,那麼updated階段則是完成了資料更新到dom的階段(對載入回來的資料進行處理),此時,ref、資料等等全部都掛載到dom結構上去,在update階段使用this.$refs.***,就100%能找到該dom節點。

updated與mounted不同的是,在每一次的dom結構更新,vue都會呼叫一次updated(){}鉤子函式!,而mounted僅僅只執行一次而已

簡單來說,只要在除錯的時候,能看到元素的存在,在updated階段都可以使用this.$refs.***找到對應的dom節點!

以上方式我覺得都不是很合適

最後我的解決方式為props傳值 

0">

import loading from "@/common/loading";

export default ,

data() ;

},};

vue中怎樣在父元件中呼叫子元件中的函式

解釋 我們可以將子元件通過ref儲存到全域性ref中,通過ref呼叫 一,首先需要引入你需要的元件。這裡不再說了,如果需要下面鏈結。新增鏈結描述 二,在父元件的元件引用的元素中 新增ref屬性如下。編輯多語言彈出框 morelunshow done gettabledata more lun 三,下...

vue中父元件呼叫子元件

在vue中父元件操作子元件通常會用ref這個特性,結合文件我們來看下ref有哪些用法 官方定義 ref被用來給元素或者子元件註冊引用資訊。換句話講就是vue留了乙個操作原生dom元素或操作子元件例項的介面 當ref定義在元素或元件上,元素或元件資訊會被註冊在例項中的 refs物件上。1 操作單個do...

react中父元件呼叫子元件的方法

react中,我們經常會想到,通過父元素直接呼叫子元素的方法,實現高內聚的效果。而這個用法的寫法卻是,五花八門。如下所示 import react from react class child extends component render class parent extends compone...