vue3 动态ref

<template>
  <div>
    <input v-if="showInput" ref="dynamicRef" type="text" />
    <button @click="toggleInput">Toggle Input</button>
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

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

export default {
  setup() {
    const showInput = ref(true);
    let dynamicRef = ref(null);

    const toggleInput = () => {
      showInput.value = !showInput.value;
    };

    const focusInput = () => {
      if (dynamicRef.value) {
        dynamicRef.value.focus();
      }
    };

    // Ensure the ref is properly set when the input is rendered
    onMounted(() => {
      if (dynamicRef.value) {
        dynamicRef.value.focus();
      }
    });

    return {
      showInput,
      dynamicRef,
      toggleInput,
      focusInput,
    };
  },
};
</script>

解释说明：

1. 动态 ref:

   • 在 Vue 3 中，ref 可以用于获取 DOM 元素或子组件的实例。在这个例子中，我们使用 ref 来获取一个动态显示和隐藏的输入框元素。

2. 模板部分:

   • 使用 v-if 控制输入框的显示与隐藏。
   • 绑定 ref="dynamicRef" 到输入框元素，以便在 JavaScript 中访问它。
   • 提供两个按钮：一个用于切换输入框的显示状态，另一个用于将焦点设置到输入框上。

3. 脚本部分:

   • 使用 ref 创建响应式变量 showInput 和 dynamicRef。
   • toggleInput 方法用于切换 showInput 的值，从而控制输入框的显示与隐藏。
   • focusInput 方法检查 dynamicRef 是否存在，并调用其 focus() 方法将焦点设置到输入框上。
   • onMounted 钩子确保在组件挂载时，如果输入框存在，则自动聚焦。

通过这种方式，你可以实现对动态生成的 DOM 元素的引用和操作。