uniapp this.$refs的使用方法

在uniapp中，如何使用this.$refs来获取子组件的实例或DOM元素？我在调用this.$refs时总是获取不到对应的组件或元素，请问正确的使用方法是什么？是否需要特殊的配置或注意事项？

2 回复

在uniapp中，this.$refs用于获取组件实例或DOM元素。

使用方法：

  1. 在模板中给元素或组件添加ref属性
<view ref="myView">内容</view>
<my-component ref="myComp"></my-component>
  1. 在JS中通过this.$refs访问：
// 获取DOM元素
this.$refs.myView

// 获取组件实例
this.$refs.myComp.someMethod()

注意： 需在组件挂载完成后使用，如onReady生命周期中。


在 UniApp 中，this.$refs 用于获取通过 ref 属性注册的组件或 DOM 元素的引用，方便直接操作其属性或方法。以下是使用方法及注意事项：

基本使用步骤

  1. 在模板中设置 ref 属性：
    在组件或元素上添加 ref 属性并命名，例如：

    <template>
  <view ref="myView">这是一个视图</view>
  <custom-component ref="myComponent"></custom-component>
</template>

  2. 通过 this.$refs 访问：
    在 Vue 组件的 JavaScript 部分（如 methods 或 mounted 生命周期），通过 this.$refs.名称 获取引用：

    export default {
  mounted() {
    // 访问 DOM 元素（如 view）
    console.log(this.$refs.myView); // 可调用原生方法，如 this.$refs.myView.focus()
    
    // 访问子组件
    const component = this.$refs.myComponent;
    component.someMethod(); // 调用子组件的方法
  }
}

注意事项

  • 引用时机：this.$refs 仅在组件渲染完成后生效，建议在 mounted 生命周期或之后使用（避免在 created 中使用）。
  • 动态 ref：如果 ref 是动态绑定的（例如 :ref="dynamicRef"），this.$refs 可能返回数组或对象，需根据情况处理。
  • 平台差异：在 UniApp 中，H5 端支持标准的 DOM 操作，但小程序端可能无法直接调用原生 DOM 方法（需使用 UniApp API 替代）。

示例场景

  • 调用子组件方法：父组件通过 this.$refs.childComponent.methodName() 触发子组件逻辑。
  • 获取元素信息：结合 uni.createSelectorQuery() 获取 DOM 尺寸或位置（小程序端常用）。

通过合理使用 this.$refs，可以简化组件间通信或直接操作元素，但应避免过度依赖以保持代码可维护性。

回到顶部