【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法(涵盖uniapp/H5/微信小程序)
·
目录
问题:获取this.$refs为空对象或者为undefined
原因一:在uniapp中,非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view、text)
原因三:ref组件使用了条件渲染,即v-if、v-show,这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js
原因四:使用了v-for循环动态绑定ref(大部分时请求后端数据动态渲染DOM),this.$ref[name]获取的是数组,详情看ref属性-Vue.js
问题:获取this.$refs为空对象或者为undefined
console.log(this.$refs) // {}
原因一:在uniapp中,非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view、text)
<view ref="viewRef"></view>
<text ref="viewRef"></text>
// js
console.log(this.$refs) // n内置组件获取不到ref{}
解决方法:ref在非H5端使用在自定义的组件
<jz-loading ref="loading"></jz-loading>
//js
console.log(this.$refs['loading']) // 输出实例
原因二:使用了版本过低的调试基础库
解决办法:切换至高版本基础库即可
原因三:ref组件使用了条件渲染,即v-if、v-show,这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js
解决办法:使用this.$nextTick(() => {})方法在渲染完成后获取ref
mounted() {
// 操作数据.
.......
this.$nextTick(()=>{
console.log(this.$refs[name]) // 输出实例
})
}
原因四:使用了v-for循环动态绑定ref(大部分时请求后端数据动态渲染DOM),this.$ref[name]获取的是数组,详情看ref属性-Vue.js
解决办法:
由this.$refs[name]改为this.$refs[name][0]
扩展场景:uni-app的H5/小程序实现锚点
实现方法(H5端):H5实现方法比较简单,获取ref组件实例的$el的offsetTop属性
methods:{
handleScrollTo(name){
//H5
uni.pageScrollTo({
scrollTop: this.$refs[name][0].$el.offsetTop,
duration: 100
});
}
}
实现方法(小程序端):小程序端使用this.$refs[name][0].$el.offsetTop会发现找不到$el属性
原因是$el只支持H5端
针对小程序我们可以用节点查询,使用uni.createSelectorQuery() 和uni.createSelectorQuery().selectViewport().scrollOffset()查询节点信息
附实现思路,拿到需要锚点组件的相对坐标top,再获取当前屏幕的滚动距离scrollTop
scrollTop - Math.abs(top) 则得出需要滚动到锚点所需距离
const query = uni.createSelectorQuery().in(this)
query.select(`#${id}`).boundingClientRect(data => {
console.log(data) // 返回节点的相对坐标信息top、bottom等
//查询当前屏幕的滚动位置等信息
uni.createSelectorQuery().selectViewport().scrollOffset(res => {
uni.pageScrollTo({
scrollTop: res.scrollTop - Math.abs(data.top),
duration: 100
});
}).exec();
}).exec();
如果文章帮助到大家,可以点赞评论收藏~
更多推荐
已为社区贡献4条内容
所有评论(0)