uniapp中$refs的用法详解你必须要知道的

在 UniApp 中，$refs 是一个非常有用的属性，用于直接访问 DOM 元素或子组件实例。通过 $refs，你可以在父组件中调用子组件的方法或访问子组件的数据，或者直接操作 DOM 元素。以下是 $refs 的详细用法：

基本用法

1. 在模板中定义 ref 属性：
   在需要访问的 DOM 元素或子组件上添加 ref 属性。

2. 在 JavaScript 中访问 ref：
   通过 this.$refs 访问定义的 ref。

示例

1. 访问子组件实例

假设我们有一个子组件 ChildComponent.vue，我们希望在父组件中调用子组件的方法。

子组件 ChildComponent.vue

<!-- ChildComponent.vue -->
<template>
  <view>
    <text>子组件数据: {
  { childData }}</text>
  </view>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      childData: '初始数据'
    }
  },
  methods: {
     
    updateData(newData) {
     
      this.childData = newData
    }
  }
}
</script>

父组件 ParentComponent.vue

<!-- ParentComponent.vue -->
<template>
  <view class="parent">
    <text>父组件数据: {
  { parentData }}