1. 程式人生 > >Vue.js 用 $refs 定位 子元件的方法時 出現 undefined

Vue.js 用 $refs 定位 子元件的方法時 出現 undefined

使用 ref 來定位 DOM 節點很方便。但是期間遇到了一個問題,就是在生命週期 mounted 鉤子函式裡面使用 this.$refs.xx,打印出來的卻是 undefined?

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

updated 與 mounted 不同的是,在每一次的 DOM 結構更新,Vue.js 都會呼叫一次 updated 鉤子函式!而 mounted 鉤子函式僅僅只執行一次而已。

mounted 階段,一般是用於發起後端請求,獲取資料,配合路由鉤子做一些事情。簡單來說就是在 mounted 鉤子中載入資料而已,載入回來的資料是不會在這個階段更新到 DOM 中的。所以在 mounted 鉤子中使用 $refs,如果 ref 是定位在有 v-if、v-for、v-show 的 DOM 節點中,返回來的只能是 undefined,因為在 mounted 階段他們根本不存在!!!

如果說 mounted 階段是載入階段,那麼 updated 階段則是完成了資料更新到 DOM 的階段(對載入回來的資料進行處理),此時,再使用 this.$refs.xx,就 100% 能找到該 DOM 節點。

在這裡插入圖片描述

在這裡插入圖片描述

提供一種思路,當在methods中用到ref,但是卻拿不到時,可以設定一個flag(isUpdate),當點選時isUpdate = 1;更新後isUpdate = 0;

updated() {
 if(this.isUpdate == 1){
      var val = this.pairArr;
      this.symbol = val.pair.split('_')[1];
      this.buy_symbol = val.pair.split('_')[0];
      this.sell_symbol = val.pair.split('_')[1];
      let _this = this;
      this.$nextTick(() => {
        _this.$refs.buys.currencytype(this.buy_symbol,this.sell_symbol);
        _this.$refs.info.getInfo(this.buy_symbol);
        _this.isUpdate = 0;
      })
    })
},