首页 APP开发 正文内容

uni-app 使用 ref 无法获取组件实例的解决方法

2023年12月02日 , 1,484

ref 是 uni-app 开发中经常要用的语法,可以用来获取元素或组件的实例,本文讲述几种可能获取失败的情况。

uni-app / Vue 中 $refs 的用法

在 uni-app 开发中,我们可以像 Vue 一样,使用 ref 来获取元素实例,类似于下面这样:

<template>
  <view ref="aaa></view>
</template>
<script>
  export default{
    onReady(){
      console.log(this.$refs.aaa);
    }
</script>

通过 this.$refs 可以获取元素实例,类似于 document.getElementById 选择 DOM,不过有时候会无法获取到实例,造成这种问题一般有两种情况。

获取组件失败原因分析

1. 异步组件加载

如果组件是异步加载的(例如使用import语法动态加载组件),需要等待组件完全加载后才能获取实例。这时候可以使用 Vue 提供的 nextTick 方法来确保获取到实例的时机正确。

<template>
  <div @click="getComponentInstance">Click me</div>
</template>

<script>
export default {
  methods: {
    getComponentInstance() {
      // 异步加载组件
      import('@/components/myComponent.vue').then((module) => {
        // 使用 nextTick 确保在组件加载完毕后获取实例
        this.$nextTick(() => {
          const componentInstance = this.$refs.myComponentRef;
          console.log(componentInstance); // 这里成功获取到实例
        });
      });
    },
  },
};
</script>

2. ref 在条件渲染中的使用

如果 ref 在条件渲染中使用,那在获取实例时,要保证组件已经被渲染出来了,否则也是无法获取的。例如,如果组件是通过 v-if 进行条件渲染,确保在条件成立时,组件被成功渲染到界面上才能使用 ref 来获取实例。

3. 在第三方组件上使用 ref

还有一种情况,我们在使用第三方封装的组件上使用 ref 时,比如使用 element ui 时,部分组件也是无法直接通过 this.$refs.xxx 来获取组件实例的,

<template>
  <el-button ref="btn1></el-button>
</template>
<script>
  export default{
    onReady(){
      console.log(this.$refs.btn1); // 输出 undefinded
    }
</script>

通过打印 $refs 对象我们可以看到,this.$refs 实际上是一个数组,多层打印就可以知道,这时候使用 this.$refs[0].btn1 来获取实例就可以了。

总结

这三种情况就是我开发过程中能遇到的 ref 使用的问题汇总,希望能帮到你解决问题。如果你遇到的问题都不是这三种情况,就要检查一下代码,比如组件是否正常引入,ref 名称是否一致等。