vue 中的 v-model详解
更新时间：2025年01月14日 11:26:22 作者：hawk2014bj
文章介绍了Vue中的v-model实现原理,包括数据监听和UI通知,通过绑定props.modelValue和使用update:modelValue,子组件可以实现数据变更通知父组件,Vue3提供了defineModel来简化v-model的定义,并支持自定义v-model变量名,感兴趣的朋友一起看看吧
v-model 是 vue 的主要特性，双向绑定是响应式变量的核心。v-model 的简单原理就是数据监听加UI通知，如何在我们自己的组件中实现 v-model 呢？数据变更监听加父组件事件通知，如下，来自官网的一个例子
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>绑定props.modelValue
父组件使用 v-model 时会自动将父组件 v-model 对应的变量转换为子组件的一个属性（props） modelValue，子组件可以通过 Props 进行读取
数据变更时进行通知
通过 update:modelValue 通知父组件数据已经更新
父组件中进行调用
<!-- Parent.vue --> <Child :modelValue="foo" @update:modelValue="$event => (foo = $event)" />
Vue3中的简化写法
可以看到 v-model 中我们需要定义数据监听和变更通知，为什么不能直接在子组件中使用 v-model 呢，这是由于 props 变量是单向的、只读的，子组件中不能更改。Vue3 提供了一个新的写法，通过 defineModel 定义 v-model 属性，如下：
<script setup> const model = defineModel() </script> <template> <input v-model="model" /> </template>
v-model 自定义变量名
默认 v-model 对应变量名为 modelValue，在 vue3 我们也可以指定变量名，这样父组件可以传递多个 v-model 变量，如下：
<script setup>
const title = defineModel('title')
</script>
<template>
<input type="text" v-model="title" />
</template>父组件中调用时，需要制定变量名
<MyComponent v-model:title="bookTitle" />
总结
v-model 核心就是监听和通知，本文使用了官网的例子进行了简单的介绍，更多高级用法可以到官网进行学习。
到此这篇关于vue 中的 v-model的文章就介绍到这了,更多相关vue 中的 v-model内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vuejs前后端数据交互之从后端请求数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Vue3中的 computed,watch,watchEffect的使用方法
这篇文章主要介绍了Vue3中的 computed,watch,watchEffect的使用方法，文章围绕主题展开详细的内容介绍，具有一定的参考价价值，需要得小伙伴可以参考一下2022-06-06
vue3中require报错require is not defined问题及解决
这篇文章主要介绍了vue3中require报错require is not defined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了vue实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要为大家详细介绍了vue实现搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
Vue3项目中配置TypeScript和JavaScript的兼容
在Vue3开发中,常见的使用JavaScript（JS）编写代码,但也会有调整编写语言使用TypeScript（TS）的需求,因此,在Vue3项目设置中兼容TS和JS是刻不容缓的重要任务,2023-08-08
这篇文章主要介绍了Vue3 使用axios拦截器打印前端日志，这是一种比较值得推荐的方式，也就是写一次，就不用总写console.log了。下面来看看文章的详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要为大家详细介绍了Vue组件简易模拟实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
本文详细介绍了使用uni-app进行项目开发的全过程,包括uni-app框架的介绍、开发工具HBuilderX的下载安装与配置、项目开发中的网络请求配置、小程序分包加载、自定义组件使用、组件使用技巧等,还提及了解决开发中遇到的一些问题,需要的朋友可以参考下2024-11-11
本文主要介绍了uniapp+vue3路由跳转传参的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
最新评论