Vue中的$refs：深入探索并实战应用

Vue中的$refs：深入探索并实战应用

在Vue.js这个流行的前端框架中，$refs是一个强大而实用的功能，它允许我们直接访问DOM元素或子组件实例。通过$refs，我们可以更灵活地操作DOM，或与子组件进行通信。本文将详细介绍$refs的作用，并通过实际例子来展示其应用。

$refs是什么？

在Vue中，$refs是一个对象，它包含了注册过ref特性的所有DOM元素和子组件实例。这些ref是在模板中通过ref属性添加的。当组件渲染完成后，你可以通过this.$refs来访问这些元素或组件实例。

$refs的作用

1. 直接访问DOM元素：通过$refs，你可以直接访问和操作DOM元素，这在某些需要直接操作DOM的复杂场景下非常有用。
2. 与子组件通信：$refs也可以用来访问子组件实例，从而调用子组件的方法或访问其数据。

实际例子

例子1：直接访问DOM元素

假设我们有一个输入框，并且我们想要在用户输入时实时显示输入的内容。我们可以使用$refs来直接访问这个输入框的DOM元素，并监听其input事件。

<template>
  <div>
    <input ref="myInput" @input="showInput" />
    <p>{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    showInput() {
      this.inputValue = this.$refs.myInput.value;
    }
  }
}
</script>

在这个例子中，我们给输入框添加了一个ref="myInput"属性，然后在showInput方法中通过this.$refs.myInput.value来获取输入框的值，并将其赋值给inputValue数据属性。

例子2：与子组件通信

假设我们有一个子组件ChildComponent，它有一个sayHello方法。我们可以使用$refs来访问这个子组件实例，并调用其sayHello方法。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.sayHello();
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>这是子组件</p>
  </div>
</template>

<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello from ChildComponent!');
    }
  }
}
</script>

 

在这个例子中，我们在父组件中通过ref="childRef"引用了子组件，并在callChildMethod方法中通过this.$refs.childRef.sayHello()调用了子组件的sayHello方法。

总结

$refs是Vue中一个非常有用的功能，它允许我们直接访问DOM元素或子组件实例。通过$refs，我们可以更灵活地操作DOM，或与子组件进行通信。然而，我们也需要注意不要过度依赖$refs，因为它可能会破坏组件的封装性和可复用性。在大多数情况下，我们应该优先考虑使用props和events来进行父子组件之间的通信。

原文：https://juejin.cn/post/7381456484427317274