vue3 refs

// 使用 Vue 3 的 refs 示例

<template>
  <div>
    <input ref="inputRef" v-model="message" />
    <p>{{ message }}</p>
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('');
    const inputRef = ref(null);

    const focusInput = () => {
      // 使用 ref 获取 DOM 元素并聚焦
      inputRef.value.focus();
    };

    onMounted(() => {
      // 组件挂载后自动聚焦输入框
      inputRef.value.focus();
    });

    return {
      message,
      inputRef,
      focusInput
    };
  }
};
</script>

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

解释说明：

• ref: 在 Vue 3 中，ref 用于创建一个响应式的引用。它可以用来引用数据或 DOM 元素。
• inputRef: 这是一个对 <input> 元素的引用。通过 ref="inputRef"，我们可以在 JavaScript 中访问这个元素。
• focusInput: 这是一个方法，点击按钮时调用，它会通过 inputRef.value.focus() 来聚焦输入框。
• onMounted: 这是一个生命周期钩子，在组件挂载完成后执行。这里我们使用它来在组件加载时自动聚焦输入框。

这个示例展示了如何使用 ref 来操作 DOM 元素，并结合 Vue 3 的组合式 API (setup 函数) 来实现功能。