【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法（涵盖uniapp/H5/微信小程序）

目录

问题：获取this.$refs为空对象或者为undefined

原因一：在uniapp中，非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）

解决方法：ref在非H5端使用在自定义的组件

原因二：使用了版本过低的调试基础库

原因三：ref组件使用了条件渲染，即v-if、v-show，这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js

原因四：使用了v-for循环动态绑定ref（大部分时请求后端数据动态渲染DOM），this.$ref[name]获取的是数组，详情看ref属性-Vue.js

扩展场景：uni-app的H5/小程序实现锚点

---

问题：获取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();
     

如果文章帮助到大家，可以点赞评论收藏~