uniapp關于this.$refs.xxx擷取元件出現undefined的解決方法

項目場景：

開發一個産品使用到比較複雜且獨立的自定義元件，自定義元件是自定義複選框/單選框

問題描述：

用ref 注冊子元件，父元件可以通過this.$refs.xx.fn調用子元件裡的函數，但是有時會出現 undefined 未定義的情況。

vue代碼

<view class="sg-checkbox">
	<helang-checkbox ref="checkbox" @change="onChange"></helang-checkbox>
</view>
           

js代碼

this.$refs.checkbox.set({
	type:ctype,		// 類型：複選框
	column:column,	// 分列：2
	list:list_data	// 清單資料
});
           

原因分析：

vue 官網中ref 下有一段話 “關于 ref 注冊時間的重要說明：因為 ref 本身是作為渲染結果被建立的，在初始渲染的時候你不能通路它們 - 它們還不存在！$refs 也不是響應式的，是以你不應該試圖用它在模闆中做資料綁定。”

意思就是需用ref之前，對于的元件必須先渲染成功，否則就不能使用ref

解決方案：

以下有三個方法可以解決這個問題

1、如果你在mounted裡擷取this. r e f s ， 因 為 d o m 還 未 完 全 加 載 ， 所 以 你 是 拿 不 到 的 ， u p d a t e 階 段 則 是 完 成 了 數 據 更 新 到 d o m 的 階 段 ( 對 加 載 回 來 的 數 據 進 行 處 理 ) ， 此 時 ， 就 可 以 使 用 t h i s . refs，因為dom還未完全加載，是以你是拿不到的， update階段則是完成了資料更新到 dom 的階段(對加載回來的資料進行處理)，此時，就可以使用this. refs，因為dom還未完全加載，是以你是拿不到的，update階段則是完成了資料更新到dom的階段(對加載回來的資料進行處理)，此時，就可以使用this.refs了

2、如果寫在method中，那麼可以使用 this.$nextTick(() => {}) 等頁面渲染好再調用，這樣就可以了

3、可以加個定時器延時加載this.$refs

this.$nextTick(()=>{
	this.$refs.checkbox.set({
		type:ctype,		// 類型：複選框
		column:column,	// 分列：2
		list:list_data	// 清單資料
	});
})