Vue 3 中的 `update:modelValue` 事件详解

在 Vue 3 中,update:modelValue​ 事件通常与 v-model​ 指令一起使用,以实现自定义组件的双向数据绑定。以下是对该事件的详细分析:

事件定义

首先,我们需要在组件中定义 update:modelValue​ 事件。可以使用 defineEmits​ 函数来声明组件可以发出的事件:

const emit = defineEmits(['update:modelValue']);

属性定义

接下来,我们需要定义组件接收的 modelValue​ 属性。可以使用 defineProps​ 函数来声明组件的 props:

const props = defineProps({modelValue: {type: Boolean,default: false}
});

创建计算属性

为了实现双向数据绑定,我们可以创建一个计算属性 _modelValue​。这个计算属性的 get​ 方法返回 modelValue​ 的当前值,而 set​ 方法则触发 update:modelValue​ 事件并传递新值:

const _modelValue = computed({get: () => {return props.modelValue;},set: (val) => {emit('update:modelValue', val);}
});

完整示例

以下是一个完整的示例,展示了如何在 Vue 3 中使用 update:modelValue​ 事件实现双向数据绑定:

<script lang="ts" setup>
import { computed } from "vue";const emit = defineEmits(['update:modelValue']);
const props = defineProps({modelValue: {type: Boolean,default: false}
});
const _modelValue = computed({get: () => {return props.modelValue;},set: (val) => {emit('update:modelValue', val);}
});
</script><template><input type="checkbox" v-model="_modelValue">
</template><style lang="scss" scoped>
/* 样式代码 */
</style>

总结

通过使用 defineEmits​ 和 defineProps​ 函数,我们可以轻松地在 Vue 3 组件中实现 update:modelValue​ 事件,从而实现双向数据绑定。这种设置允许组件与 v-model​ 无缝配合,使父组件和子组件之间的数据同步变得更加简单和高效。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/852455.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

转载:【AI系统】动态图与静态图转换

从 TensorFlow、PyTorch,到 PaddlePaddle、MindSpore、MegEngine,主流的 AI 框架动静态图转换,经历了动静分离、动静结合到动静统一的发展过程。兼顾动态图易用性和静态图执行性能高效两方面优势,均具备动态图转静态图的功能,支持使用动态图编写代码,框架自动转换为静态图…

转载:【AI系统】数据并行

数据并行是一种广泛应用于分布式 AI 系统中的技术,旨在通过将数据集划分为多个子集并在不同计算节点上并行处理这些子集,以提高计算效率和速度。在大规模机器学习和深度学习训练过程中,数据并行可以显著加快模型训练速度,减少训练时间,提升模型性能。大部分的数据并行模型…

规模法则(Scaling Law)与参数效率的提高,

上一篇:《人工智能大语言模型起源篇(三),模型规模与参数效率》 规模法则与效率提高 如果你想了解更多关于提高变换器效率的各种技术,我推荐阅读2020年的《Efficient Transformers: A Survey》https://arxiv.org/abs/2009.06732论文,接着是2023年的《A Survey on Efficien…

HarmonyOS NEXT开发实战教程—淘宝搜索页

今天忙里偷闲,分享一个淘宝搜索页实现过程,先上效果图:界面部分比较简单,大体分为导航栏、历史搜索、猜你想搜和热搜榜几个部分,历史搜索采用用户首选项进行存储数据。 导航栏部分相关代码如下:Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,alignItems:ItemA…

易优EyouCMS的“易优修改重置后台密码小工具”有哪些功能,如何使用?

易优EyouCMS的“易优修改重置后台密码小工具”是一个非常实用的工具,可以帮助您在忘记后台密码或其他登录问题时快速解决问题。以下是该工具的主要功能及其使用方法:后台密码重置:功能介绍:如果您忘记了后台管理员密码,可以使用此工具快速重置。 使用方法:下载 setpwd.ph…

如何在易优EyouCMS中手动创建缺失的数据表?

在使用易优EyouCMS时,如果遇到数据表缺失的情况,您可以通过以下步骤手动创建缺失的数据表:确认数据表缺失:登录到您的数据库管理工具(如phpMyAdmin),检查报错中提到的数据表是否存在于当前数据库中。例如,如果报错提示“数据表 ey_product_spec_value_handle 不存在”,…

WSL搭建深度强化学习环境

WSL搭建深度强化学习环境 https://zhuanlan.zhihu.com/p/683058297 假定你已经安装好wsl 安装miniconda https://docs.anaconda.com/miniconda/install/ curl -O https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh bash ~/Miniconda3-latest-Linux-x86_6…

【Word文档】结构分析+安全

结构分析 自2000年代中期以来,办公文档(如2005年发布的 OpenOffice.org 2.0)已经被设计为一种包含文档内容的归档文件。在下图中,可以看到一个 Word 文档的结构。从上图可以发现,这个归档文件中的所有结构是相互关联的,而这种关系是从末端开始的。 在归档文件的末尾,有一…

【Word文档】结构分析

自2000年代中期以来,办公文档(如2005年发布的 OpenOffice.org 2.0)已经被设计为一种包含文档内容的归档文件。在下图中,可以看到一个 Word 文档的结构。从上图可以发现,这个归档文件中的所有结构是相互关联的,而这种关系是从末端开始的。 在归档文件的末尾,有一个名为中…

财务知识-开票加税点的合理点数

财务知识-开票加税点的合理点数