vue3动态ref

// 使用 Vue 3 的动态 ref 示例

<template>
  <div>
    <input v-if="isInput" ref="inputRef" type="text" />
    <button @click="toggleElement">Toggle Element</button>
    <button v-if="isInput" @click="focusInput">Focus Input</button>
  </div>
</template>

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

export default {
  setup() {
    const isInput = ref(true);
    let inputRef = ref(null);

    const toggleElement = () => {
      isInput.value = !isInput.value;
      // 确保在切换回输入框时，ref 能够正确更新
      if (isInput.value) {
        nextTick(() => {
          inputRef = ref(null);
        });
      }
    };

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

    return {
      isInput,
      inputRef,
      toggleElement,
      focusInput,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

1. ref 的使用：我们使用 ref 来创建一个响应式的引用 (inputRef)，它会在模板中绑定到 <input> 元素。
2. 动态元素的切换：通过 v-if 指令和 isInput 变量来控制 <input> 元素的显示与隐藏。当 isInput 为 false 时，<input> 元素将被移除。
3. nextTick 的使用：当重新切换回显示 <input> 元素时，我们使用 nextTick 来确保 DOM 更新完成后再重新初始化 inputRef，以确保 ref 能够正确引用新的 DOM 元素。
4. 聚焦输入框：通过 focusInput 方法调用 inputRef.value.focus() 来手动聚焦输入框。

这个示例展示了如何在 Vue 3 中处理动态生成的元素，并确保 ref 在元素切换时能够正确工作。