Vue中 ref 使用汇总

在 Vue 2 中使用 ref

在 Vue 2 中，可以使用 ref 属性来获取模板中的 DOM 元素或者组件实例，但不能直接在模板中使用。在 Vue 2 中，ref 主要用于在组件内部获取 DOM 元素或者组件实例。

<template>
  <div>
    <!-- 组件内部的 DOM 元素 -->
    <input type="text" ref="textInput">
  </div>
</template>

<script>
export default {
  mounted() {
    // 在组件内部通过 this.$refs 访问绑定的 DOM 元素
    console.log(this.$refs.textInput.value);
  }
};
</script>

在组合式 API 中使用 ref

<template>
  <div ref="container">
    <!-- 组件内部的 DOM 元素 -->
    <input type="text" ref="textInput">
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const container = ref(null);
    const textInput = ref(null);

    onMounted(() => {
      // 在组合式 API 中使用 ref 访问绑定的 DOM 元素
      console.log(container.value);
      console.log(textInput.value);
    });

    return {
      container,
      textInput
    };
  }
};
</script>