vue组件实现v-model,vue3 model
vue2中广泛使用V-model，但是这个指令一般用在输入框中，这个指令其实是一个语法糖果。下面文章主要介绍v-model在vue3组件中的使用及相关资料进行深入讲解。有需要的可以参考一下。
目录
垂直模型输入使用双向绑定数据
组件中的v模型
其他书写方法
摘要
v-model input中使用双向绑定数据
在vue中，我们经常使用v-model与输入输入框的输入值绑定。我们应该都知道通过绑定v-bind的值，结合@input输入事件动态改变绑定值来实现双向绑定的简单实现原理，如下面的vue3实现代码所示：
模板
输入类型=text :值=tryText @input=handelInput
h2{{tryText}}/h2
/模板
脚本
从“vue”导入{ ref}
导出默认值{
setup(){
让tryText=ref(默认输入值)
函数句柄输入(e) {
try text . value=e . target . value；//需要通过访问和修改//ref定义的数据。价值。
}
返回{
尝试文本，
手动输入
}
}
}
/脚本
相信你在ipnut中经常使用v-model。现在我们来看看如何在组件中使用v-model，它的功能是什么。
组件中的v-model
如何在组件中使用v-model？简单点说吧。
父组件
模板
！-组件绑定v-模型-
hy输入v模型=消息/hy输入
h2{{message}}/h2
/模板
脚本
从 @vue/reactivity 导入{ ref }
从导入HyInput./components/HyInput.vue
导出默认值{
组件：{HyInput }，
setup(){
Let message=ref(嘿嘿嘿-(*) (*))
返回{
消息，
}
}
}
/脚本
组件
模板
button @ click= handelclick o(_)o哈哈~/button
英国铁路公司
/模板
脚本
导出默认值{
道具：{
模型值：字符串，
},
发出：[update:modelValue]，
设置(道具、上下文){
函数handelClick() {
context . emit( update:model value ， o ( _ ) o哈哈~ )
}
返回{
handelClick，
}
}
}
/脚本
看到这里我们可能会有些疑惑。为什么要发动这次事件？为什么会有道具接收默认值？别急，从实现原理来看。
这样我们就可以通过点击子组件的按钮来改变父组件中message的数据，这是组件中双向数据绑定的一个简单的v-model实现。
既然是双向绑定，那就大胆猜测一下，是不是类似于输入中的实现原理。让我们来看看它是如何工作的。
父组件
模板
！-原则-
hy-input:model value= message @ update:model value= message=$ event /hy-input
h2{{message}}/h2
/模板
脚本
从 @vue/reactivity 导入{ ref }
从导入HyInput./components/HyInput.vue
导出默认值{
组件：{HyInput }，
setup(){
Let message=ref(嘿嘿嘿-(*) (*))
返回{
消息，
}
}
}
/脚本
子组件是相同的。
模板
button @ click= handelclick o(_)o哈哈~/button
英国铁路公司
/模板
脚本
导出默认值{
道具：{
模型值：字符串，
},
发出：[update:modelValue]，
设置(道具、上下文){
函数handelClick() {
context . emit( update:model value ， o ( _ ) o哈哈~ )
}
返回{
handelClick，
}
}
}
/脚本
结果，我们发现这是可以实现的。
这样，我们可以很好地理解子组件中的发送事件和默认接收值。基本实现原理是：父组件将值传递给子组件，子组件通过props接收。但是，当子组件中的数据需要修改时，我们发送一个事件来告诉父组件，然后父组件接收传输的值进行修改。其实就是父子组件之间的通信，不过vue给我们做了一个简单的包。
Ps:默认的v-model绑定数据在读取子组件时需要使用modelValue来接收启动事件。默认名称为update:modelValue。如果要绑定多个值或使用自定义名称，请参考下面的其他编写方法。
Ps:你不能想通过修改道具来修改数据。首先，这是一个特别不好的养成习惯。然后我们知道道具的特性只负责传递数据。修改道具达不到想要的效果。我们应该通知父组件更新数据，这是最好的方法。
其他写法
如果我们的子组件中的输入双向绑定到父组件，如何实现它？并且需要传输多个双向绑定数据？自定义名称呢？
父组件
模板
！-组件绑定v-模型-
hy-input v-model= message v-model:text= inputText /hy-input
h2{{message}}/h2
h2{{inputText}}/h2
/模板
脚本
从 @vue/reactivity 导入{ ref }
从导入HyInput./components/HyInput.vue
导出默认值{
组件：{HyInput }，
setup(){
Let message=ref(嘿嘿嘿-(*) (*))
Let inputText=ref(嘻嘻嘻)
返回{
消息，
输入文本
}
}
}
/脚本
组件
模板
button @ click= handelclick o(_)o哈哈~/button
英国铁路公司
输入类型=text v-model=customText
英国铁路公司
/模板
脚本
从“vue”导入{computed}
导出默认值{
道具：{
模型值：字符串，
文本：字符串
},
发出：[update:modelValue ， update:text]，
设置(道具、上下文){
函数handelClick() {
context . emit( update:model value ， o ( _ ) o哈哈~ )
}
let customText=computed({
设置(值){
context.emit(update:text ，值)
},
get(){
返回道具. text
}
})
返回{
handelClick，
自定义文本，
}
}
}
/脚本
多个绑定值和重命名方法：v-model: text="input text "子组件中的props直接是文本。启动事件名称为更新：文本。
这里我们看到，为了实现子组件中输入框v-model到父组件的双向绑定，我们需要使用computed属性来实现。可能有的同学想直接把文字绑定在道具里，这样就可以了？还是那句话，如果只是读取，可以绑定，但是修改的时候需要通过启动事件通知父组件更新数据(不能修改props里的值，只能读取！).所以在计算属性中，我们在集合中启动一个事件来更新父组件的数据。阅读时，我们只需要直接读取道具中的数值即可。
总结
关于vue3组件中v-model的使用和解释的这篇文章到此为止。关于在vue3组件中使用v-model的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。