uniapp 如何获取ref引用

在uniapp中，如何通过ref获取组件或DOM节点的引用？我在使用this.$refs时发现无法正确获取到元素，控制台返回undefined。请问正确的写法是什么？是否需要特殊配置？在H5和小程序平台下获取方式是否不同？

2 回复

在uniapp中获取ref引用，使用this.$refs.组件名即可。例如：this.$refs.myInput.focus()。注意要在组件上设置ref属性，如<input ref="myInput" />。


在 UniApp 中，获取 ref 引用主要通过 Vue.js 的 $refs 对象实现。ref 用于在模板中标记组件或 DOM 元素，以便在 JavaScript 中直接访问。以下是具体方法：

步骤说明：

  1. 在模板中定义 ref：
    在 Vue 模板中，使用 ref 属性为组件或元素添加引用标识。

    <template>
  <view>
    <!-- 标记一个元素 -->
    <input ref="myInput" type="text" placeholder="输入内容" />
    <!-- 标记一个自定义组件 -->
    <custom-component ref="myComponent" />
  </view>
</template>

  2. 在 JavaScript 中通过 $refs 访问：
    在 Vue 实例（如 methods、mounted 生命周期）中，使用 this.$refs.refName 获取对应的引用。

    export default {
  methods: {
    focusInput() {
      // 获取输入框元素并聚焦
      if (this.$refs.myInput) {
        this.$refs.myInput.focus();
      }
    },
    callComponentMethod() {
      // 调用自定义组件的方法
      if (this.$refs.myComponent) {
        this.$refs.myComponent.someMethod();
      }
    }
  },
  mounted() {
    // 页面加载后自动聚焦输入框
    this.$nextTick(() => {
      this.focusInput();
    });
  }
}

注意事项：

  • 引用生效时机：$refs 仅在组件渲染完成后填充，避免在 created 生命周期中使用，推荐在 mounted 或 $nextTick 中访问。
  • 动态 ref：如果 ref 是动态的（例如 v-for 循环生成），$refs 会是一个数组，需通过索引访问。
  • 平台差异：在 UniApp 中，H5 端与 Vue 行为一致，但小程序端部分 API 可能受限（如 DOM 操作），请确保使用跨端兼容方法。

通过以上方式，即可在 UniApp 中高效获取并操作 ref 引用。

回到顶部