uniapp中开发小程序使用ref获取dom实例,一直显示undefined,竟然发现是这个原因! |
您所在的位置:网站首页 › 微信小程序为啥不能用 › uniapp中开发小程序使用ref获取dom实例,一直显示undefined,竟然发现是这个原因! |
小程序是不能使用getElementById之类的dom api,所以考虑使用ref来获取dom元素,但事实上并不是如此,绑定ref后并没有输出我想要的dom元素。 既然console.log(this.$refs.iRef)为undefined,会不会this.$refs也是undefined?然而this.$refs是有值的,就是没有iRef,那么到底是为什么? 会不会是需要延迟获取,dom还没有生成?见此,我设置了2秒定时器并放在mounted中执行,结果:然并卵,还是undefined。 我浏览了一下vue官网对ref的说明,明白了出问题的原因,这里引用vue官网的说法: 关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。 解释:如果你该ref绑定的元素不是当前页面的元素,也就是当前页面调用的某个子组件,那么在mounted中是不能通过$refs来访问的,可以通过this.$nextTick()来访问它,而且得放在methods里面。 我尝试着去用this.$nextTick()来获取该元素,但是依旧是undefined。最后,我想起来我这个是uniapp项目,会不会和uniapp有关? 最终结论小程序中,uniapp的ref要绑定在子组件中才能被获取,如果绑定在view,是获取不了的,你得把业务写在一个组件来引用才行。 h5则没有这种情况。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |