Vue3 defineModel的使用示例详解
更新时间：2025年01月16日 09:48:44 作者：啥也不会啥都白费
文章介绍了vue中向子组件传值并允许修改的机制,通过defineModel实现双向绑定,它返回一个ref,并且可以配置底层prop的选项,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
基础配置使用
在vue中，父组件可以在子组件上传值，子组件通过props接收，但是子组件不可修改props，否则控制台会报出警告，这也符合vue的单向数据流原则，所以如果想要向子组件传值，并且允许子组件修改的话，一般会这么写：
<!-- Child.vue -->
<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>在父组件调用
<!-- Parent.vue --> <Child :modelValue="foo" @update:modelValue="$event => (foo = $event)" />
而在vue3中，声明了一种新的传值方式defineModel,可以更方便的向子组件传值，并且允许子组件修改传值,以实现双向绑定.
<!-- Child.vue -->
<script setup>
const model = defineModel()
function update() {
model.value++
}
</script>
<template>
<div>Parent bound v-model is: {{ model }}</div>
<button @click="update">Increment</button>
</template>父组件
<!-- Parent.vue --> <Child v-model="countModel" />
defineModel() 返回的值是一个 ref。它可以像其他 ref一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：
- 它的 .value 和父组件的 v-model 的值同步；
- 当它被子组件变更了，会触发父组件绑定的值一起更新。
defineModel允许配置，可以通过给 defineModel 传递选项，来声明底层 prop 的选项：
// 使 v-model 必填
const model = defineModel({ required: true })
// 提供一个默认值
const model = defineModel({ default: 0 })需要注意的是：如果为 defineModel prop 设置了一个 default 值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。
<!-- Child.vue -->
const model = defineModel({ default: 1 })
<!-- Parent.vue -->
const myRef = ref()
<Child v-model="myRef"></Child>上述代码中，父组件的 myRef 是 undefined，而子组件的 model 是 1，所以如果设置初始值,应保持二者一致。
配置参数，绑定多个v-model
组件上的 v-model 也可以接受一个参数：
<MyComponent v-model:title="bookTitle" />
<!-- MyComponent.vue -->
<script setup>
const title = defineModel('title')
</script>
<template>
<input type="text" v-model="title" />
</template>如果需要额外的 prop 选项，应该在 model 名称之后传递：
const title = defineModel('title', { required: true })绑定多个v-model
<UserName v-model:first-name="first" v-model:last-name="last" />
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>
<template>
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
</template>到此这篇关于Vue3 defineModel的使用示例详解的文章就介绍到这了,更多相关Vue3 defineModel使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在使用Axios进行网络请求时,遇到“Network Error”报错可能是由多种原因导致的,这篇文章主要介绍了vue3前端axios请求报错network错误的解决办法,需要的朋友可以参考下2025-08-08
resetFields 对整个表单进行重置,将所有字段值重置为空并移除校验结果,下面这篇文章主要给大家介绍了关于vue中resetFields重置初始值不生效的原因的相关资料,需要的朋友可以参考下2023-03-03
这是一个基于Vue2的简易省市区县三级联动组件，可以控制只显示省级或只显示省市两级，可设置默认值等。提供原始省市县代码和名称数据，适用于各种有关城市区县的应用。需要的朋友可以参考下2018-11-11
Vue+better-scroll 实现通讯录字母索引的示例代码
通讯录字母索引是常用的一种功能，本文主要介绍了Vue+better-scroll 实现通讯录字母索引，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要为大家详细介绍了Vue图片放大镜组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家介绍了vue.js项目中使用原生js实现移动端的轮播图，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了vue使用xlsx导入到表格中代码,具体实现是先通过FileReader将上传的文件读取为二进制数据,然后使用xlsx将它解析成JSON数据,最后将JSON数据填充到表格中,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了使用vue实现一个电子签名组件的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
随着 Vue 3 的发布,框架带来了更多的新特性和增强,其中之一就是 watch 函数的升级,这一改进使得多个数据的变化侦听更加优雅和灵活,本文将深入探讨 Vue 3 中的 watch 函数,以及如何以更加优雅的方式实现对多个数据变化的监听2023-08-08
本篇文章主要介绍了VUE使用vuex解决模块间传值问题 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论