Vue3组合式API中使用forwardRef()函数

<template>  
  <div>  
    <h2>My Component</h2>  
    <p>Total: {{ total }}</p>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
<script>  
import { ref, forwardRef } from 'vue';  
export default forwardRef(function MyComponent(props) {  
  const count = ref(0);  
  const total = ref(0);  
  const increment = () => {  
    count.value++;  
    total.value += 10;  
  };  
  return {  
    count,  
    total,  
    increment,  
  };  
});  
</script>

<template>  
  <form @submit.prevent="submit">  
    <div>  
      <label>Username:</label>  
      <input v-model="username" @input="validate('username')">  
      <span v-if="errors.username">{{ errors.username }}</span>  
    </div>  
    <div>  
      <label>Password:</label>  
      <input v-model="password" @input="validate('password')">  
      <span v-if="errors.password">{{ errors.password }}</span>  
    </div>  
    <button type="submit">Submit</button>  
  </form>  
</template>  
<script>  
import { ref, forwardRef } from 'vue';  
export default forwardRef(function Form(props) {  
  const [username, setUsername] = ref('');  
  const [password, setPassword] = ref('');  
  const [errors, setErrors] = ref({});  
  const validate = (field) => {  
    if (!field) {  
      return;  
    }  
    const value = ref(field).value;  
    if (value === '') {  
      setErrors((prev) => ({ ...prev, [field]: 'Required' }));  
    } else if (field === 'username' && value.length < 5) {  
      setErrors((prev) => ({ ...prev, [field]: 'Username must be at least 5 characters long' }));  
    } else if (field === 'password' && value.length < 8) {  
      setErrors((prev) => ({ ...prev, [field]: 'Password must be at least 8 characters long' }));  
    } else {  
      setErrors((prev) => ({ ...prev, [field]: '' }));  
    }  
  };  
  const submit = () => {  
    validate();  
    console.log({ username, password });  
  };  
  return {  
    username,  
    password,  
    errors,  
    validate,  
    submit,  
  };  
});  
</script>