ref方法 vue

在 Vue.js 中，ref 是一个用于给元素或组件注册引用信息的特殊属性。它可以让我们在 Vue 实例中直接访问特定的 DOM 元素或子组件。

在模板中使用 ref：

<!-- 给元素注册 ref -->
<div ref="myDiv"></div>

<!-- 给组件注册 ref -->
<my-component ref="myComponent"></my-component>

在 Vue 实例中使用 ref：

new Vue({
  el: '#app',
  mounted() {
    // 访问元素
    console.log(this.$refs.myDiv);

    // 访问组件
    console.log(this.$refs.myComponent);
  }
})

需要注意的是，当在子组件上使用 ref 时，获取到的是子组件实例，而不是 DOM 元素。如果需要访问子组件内部的 DOM 元素，可以在子组件中使用 ref，然后通过 $refs 访问。

<!-- 子组件模板 -->
<template>
  <div>
    <input type="text" ref="myInput">
  </div>
</template>

<!-- 父组件模板 -->
<template>
  <my-component ref="myComponent"></my-component>
</template>

<!-- 访问子组件内部的 DOM 元素 -->
<script>
  export default {
    mounted() {
      console.log(this.$refs.myComponent.$refs.myInput);
    }
  }
</script>