在 page 頁面中獲取自定義組件實例

起因:
	使用 vant-weapp 的 Dialog 彈出框組件,點擊了 'confirm' 按鈕後,如果報錯,按鈕一直處於 '加載狀態'。

	查看官方文檔(非常仔細的看了下...),Dialog 組件支持 2 種方式的調用:
		1>函數調用
		2>組件調用

	而關於 'confirm' 按鈕的 loading 狀態,文檔中提及了 'Dialog.stopLoading() - 停止按鈕的加載狀態。

	但是使用 '組件調用' 並沒說解決方法

	後到官方 issues 查看:
		https://github.com/youzan/vant-weapp/issues?utf8=%E2%9C%93&q=dialog+%E7%BB%84%E4%BB%B6stopLoading

	提到了可以通過:
		this.selectComponent('#id') 來獲取 Dialog 組件實例,然後再執行 stopLoading() 即可

	最終就是:
		this.selectComponent('#id').stopLoading()

開始解決:
	頁面中使用 this.selectComponent('#id'),一直報錯:
		this.selectComponent is not a function

	查看小程序官方文檔,關於 selectComponent:
		https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html	
	在自定義組件中,可以獲取內部的自定義組件實例:
		selectComponent - 使用選擇器選擇組件實例節點,返回匹配到的第一個組件實例對象(會被 wx://component-export 影響)

		selectAllComponents - 使用選擇器選擇組件實例節點,返回匹配到的全部組件實例對象組成的數組

	想着我是不是因爲是在 page(頁面) 中使用的問題,各種搜索,好像有的說可以、有的不可以,然後開始在社區提問:
		https://developers.weixin.qq.com/community/develop/doc/000e02ed5307c0cdfcc8501975b400?jumpto=qcomment&commentid=00064c6b7f8520bef4c89c8025b0

	後自己測試,發現原生小程序的 page(頁面) 中可以使用 this.selectComponent('#id')

	考慮是不是 wepy 框架問題,再進入 wepy 官方 issues 搜索問題:
		https://github.com/Tencent/wepy/issues?utf8=%E2%9C%93&q=selectComponent

	找到最終解決方案:
		this.$wxpage.selectComponent() 

總結:
	獲取組件實例:
		原生小程序:
			this.selectComponent('#id')

		wepy 框架:
			this.$wxpage.selectComponent() 

		mpvue 框架:
			self.$mp.page.selectComponent("#submitCaseDialog").stopLoading()

			也記錄下(未使用過 mpvue 框架):
				https://github.com/Meituan-Dianping/mpvue/issues/605

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章