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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了vue 项目优雅的对url参数加密详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了关于electron-vue打包后运行白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue.js刷新当前页面的常见方法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-12-12
Vue3 + Element Plus 实现可搜索、可折叠、可拖拽的部门树组件功能
本文给大家介绍Vue3 + Element Plus 实现可搜索、可折叠、可拖拽的部门树组件,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-08-08
这篇文章主要介绍了vue-cli 2.*中导入公共less文件的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了vue-cli3中如何打包成zip压缩文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最近项目需要将原vue项目结合ts的使用进行改造，本文从安装到vue组件编写进行了说明，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要给大家介绍了关于Element-UI中el-table如何合并相同单元格的相关资料,el-table的组件的可以合并单元格,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-08-08
在Vue开发中,父组件和子组件之间的数据传递是一项常见的任务,本文将介绍如何在Vue中实现父组件控制子组件的值,以便灵活地管理和更新子组件的数据,文中有详细的代码讲解,需要的朋友可以参考下2023-11-11
屏幕录制和直播推流是现代Web应用中常用的功能,Vue作为一种流行的JavaScript框架,提供了一些工具和库,可以方便地实现屏幕录制和直播推流功能,本文将介绍如何在Vue中进行屏幕录制和直播推流,需要的朋友可以参考下2024-01-01
最新评论