在 page 页面中获取自定义组件实例

最新推荐文章于 2024-09-04 22:18:45 发布

beyond__devil

最新推荐文章于 2024-09-04 22:18:45 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 selectComponent

本文链接：https://blog.youkuaiyun.com/beyond__devil/article/details/94961579

微信小程序专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了在wepy框架下，如何解决vant-weapp Dialog组件中'confirm'按钮的加载状态问题。通过对比原生小程序与wepy框架下的组件实例获取方法，最终找到了正确的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因：
	使用 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