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

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 名称是否一致等。