Javascript 如何在vue 3中实现可重用组件输入？

有人能给我一个关于VUE3中可重用组件输入的提示吗？像这样的反应：

比方说

在父组件中使用可重用组件

从'react'导入{useState}；
从“./component/Input”导入输入；
函数Home（）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
控制台日志（电子邮件、密码）；
}
返回(
setEmail（e.target.value）}/>
setPassword（e.target.value）}/>
登录
);
}

此处

组件：

导出默认功能输入（道具）{
const{id，labelText，value，onChange}=props；
返回(
{labelText}
);
}

你应该仔细阅读

关键概念：

• 使用指令（或缩写为

  ：

  前缀）进行数据绑定
• 对事件处理程序使用指令（或缩写为

  @

  前缀）
• 用于数据属性的字符串插值
• 使用该指令进行双向数据绑定
• 使用选项声明属性
• 用于使用创建数据属性

Vue 3中的等效输入组件：

{{labelText}}
导出默认值{
道具：{
id:String，
标签文本：字符串，
modelValue:String，
},
};

及表格:

登录
从“@/components/MyInput.vue”导入MyInput；
从“vue”导入{ref}；
导出默认值{
组成部分：{
我的输入，
},
设置（）{
const email=ref（“”）；
const password=ref（“”）；
返回{
电子邮件，
密码，
handleSubmit（e）{
e、 预防默认值（）
console.log（“提交”、email.value、password.value）；
},
};
},
};

---

回答得很好！这超出了我的预料。。谢谢你的回答！