【vue】defineModel在vue3.4中的最新用法和详解

在这里插入图片描述

2023年12月28日,尤大发布了vue3.4版本,这个版本主要对一些实验性特性的改进(比如defineModel),大量重写了模板编译器并重构了响应式系统,可以说是大大提升了运行速度和效率。

之前在vue3.3中defineModel是实验特性,但vue3.4版本中已经是稳定特性了!!

不过在Vue3.4中,与之前的使用会有一些区别。

这个编译器宏,主要用于值的双向绑定上。(关于编译器宏的介绍:什么是编译器宏?)
props的设计原则是要符合单向数据流,所以不能直接修改props, 需要emit一个事件来告诉父组件,在父组件中修改。

举个栗子:父子组件的弹窗控制显示
1.最初进行值的双向绑定的写法

<!--子组件:EditForm.vue  -->
<template>
<el-drawerv-model="visible">...</el-drawer></template><script setup lang="ts">
const props = withDefaults(defineProps<{visible: boolean;}>(),{visible: false,//设置默认值,不然控制台会出现警告},
);
const emit = defineEmits([ 'update:visible']);const visible = computed({get: () => props.visible,set: () => emit('update:visible'),
});
</script>
  <!-- 父组件 --><EditForm ref="editFormRef" v-model:visible="state.editFormVisible"></EditForm>

2.vue3.4之前

<!--子组件:EditForm.vue  -->
<template>
<el-drawerv-model="visible">...</el-drawer>
</template>
<script setup lang="ts">const visible = defineModel<boolean>('visible',{local:true});// local:true表示如果引用多个子组件,值不共享</script>
  <!-- 父组件 --><EditForm ref="editFormRef" v-model:visible="state.editFormVisible"></EditForm>

3.vue3.4中

<!--子组件:EditForm.vue  -->
<el-drawerv-model="visible">...</el-drawer>
<script>const visible = defineModel<boolean>('visible');
</script>
  <!-- 父组件 --><EditForm ref="editFormRef" v-model:visible="state.editFormVisible"></EditForm>

vue3.4中defineModel中第二个配置项去掉了local这个属性。目前options可以传的的参数:
在这里插入图片描述
在这里插入图片描述
defineModel中默认值是基本数据类型

const inputValue = defineModel<string>({ default: '' });

之前在vue3.4之前默认值是复杂数据类型的写法:

const drillFields = defineModel<string[]>('drillFields', { default: () => []) });

vue3.4defineModel中默认值是复杂数据类型 (注意!!!)

const drillFields = defineModel<string[]>('drillFields', {get(val) {return reactive(val || []);},
});const drillTitles = defineModel<string[]>('drillTitles', {get(val) {return reactive(val || []);},
});

稳定版本的里面 defineModel 更类似是一个语法糖:

const foo = defineModel('foo');// 上面的类似于:
const props = defineProps(['foo']);
const emits = defineEmits(['update:foo']);

所以在子组件中操作defineModel中的值,比如像这种 foo.value.push(‘test’); 的代码就有问题,相当于直接:props.foo.push(‘test’)

vue3.4 还有一些其它比较大的变动可以查看:
https://blog.vuejs.org/posts/vue-3-4#other-removed-features(尤大博客原文)
https://blog.ninja-squad.com/2023/12/29/what-is-new-vue-3.4/
https://cn.vuejs.org/guide/components/v-model.html
https://cn.vuejs.org/api/sfc-script-setup.html#definemodel

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

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

相关文章

分布式ID是什么,以美团Leaf为例改造融入自己项目【第十一期】

前言 在日常开发中&#xff0c;主键id应用是非常广泛的&#xff0c;但是当涉及到分布式系统的时候&#xff0c;往往需要使用到分布式id&#xff0c;每一个服务里面一套生成规则的不易管理&#xff0c;容易引发冲突。我的IM聊天系统中使用分布式id来生成消息唯一键,为后面幂等做…

Flink CEP实现10秒内连续登录失败用户分析

1、什么是CEP&#xff1f; Flink CEP即 Flink Complex Event Processing&#xff0c;是基于DataStream流式数据提供的一套复杂事件处理编程模型。你可以把他理解为基于无界流的一套正则匹配模型&#xff0c;即对于无界流中的各种数据(称为事件)&#xff0c;提供一种组合匹配的…

网络防御安全:2-6天笔记

第二章&#xff1a;防火墙 一、什么是防火墙 防火墙的主要职责在于&#xff1a;控制和防护。 防火墙可以根据安全策略来抓取流量之后做出对应的动作。 二、防火墙的发展 区域&#xff1a; Trust 区域&#xff0c;该区域内网络的受信任程度高&#xff0c;通常用来定义内部…

单片机介绍

本文为博主 日月同辉&#xff0c;与我共生&#xff0c;csdn原创首发。希望看完后能对你有所帮助&#xff0c;不足之处请指正&#xff01;一起交流学习&#xff0c;共同进步&#xff01; > 发布人&#xff1a;日月同辉,与我共生_单片机-CSDN博客 > 欢迎你为独创博主日月同…

electron-builder vue 打包后element-ui字体图标不显示问题

当使用electron打包完成的时候&#xff0c;启动项目发现使用的element-ui字体图标没显示都变成了小方块&#xff0c;并出现报错&#xff0c;请看下图&#xff1a; 解决方法&#xff1a; 在vue.config.js中设置 customFileProtocol字段&#xff1a;pluginOptions: {electronBui…

两个近期的计算机领域国际学术会议(软件工程、计算机安全):欢迎投稿

近期&#xff0c;受邀担任两个国际学术会议的Special session共同主席及程序委员会成员&#xff08;TPC member&#xff09;&#xff0c;欢迎广大学界同行踊跃投稿&#xff0c;分享最新研究成果。期待这个夏天能够在夏威夷檀香山或者加利福尼亚圣荷西与各位学者深入交流。 SERA…

防御保护常用知识

防火墙的主要职责在于&#xff1a;控制和防护 --- 安全策略 --- 防火墙可以根据安全策略来抓取流量之 后做出对应的动作 防火墙分类主要有四类&#xff1a; 防火墙吞吐量 --- 防火墙同一时间能处理的数据量多少 防火墙的发展主要经过以下阶段&#xff1b; 传统防火墙&#xf…

格子表单GRID-FORM | 嵌套子表单与自定义脚本交互

格子表单/GRID-FORM已在Github 开源&#xff0c;如能帮到您麻烦给个星&#x1f91d; GRID-FORM 系列文章 基于 VUE3 可视化低代码表单设计器嵌套表单与自定义脚本交互 新版本功能 &#x1f389; 不觉间&#xff0c;GRID-FORM 已经开源一年&#xff08;2023年1月29日首次提交…

大数据StarRocks(八):资源隔离实战

前言 自 2.2 版本起&#xff0c;StarRocks 支持资源组管理&#xff0c;集群可以通过设置资源组&#xff08;Resource Group&#xff09;的方式限制查询对资源的消耗&#xff0c;实现多租户之间的资源隔离与合理利用。在 2.3 版本中&#xff0c;StarRocks 支持限制大查询&#…

HAL STM32+EC11编码器实现增减调节及单击、双击、长按功能

HAL STM32EC11编码器实现增减调节及单击、双击、长按功能 &#x1f4fa;实现效果演示&#xff1a; &#x1f4d8;内容提要 &#x1f4dd;本文主要实现&#xff0c;通过STM32 HAL库开发&#xff0c;实现的EC11编码器功能&#xff0c;按键结合状态机思想实现的拓展单击、双击、…

Linux之快速入门(CentOS 7)

文章目录 一、Linux目录结构二、常用命令2.1 切换用户2.2查看ip地址2.3 cd2.4 目录查看2.5 查看文件内容2.6 创建目录及文件2.7 复制和移动2.8 其他2.9 tar3.0 which3.1 whereis3.2 find&#xff08;这个命令尽量在少量用户使用此软件时运行&#xff0c;因为此命令是真的读磁盘…

计数排序(六)——计数排序及排序总结

目录 一.前言 二.归并小补充 三.计数排序 操作步骤&#xff1a; 代码部分&#xff1a; 四.稳定性的概念&#xff1a; 五.排序大总结&#xff1a; ​六.结语 一.前言 我们已经进入排序的尾篇了&#xff0c;本篇主要讲述计数排序以及汇总各类排序的特点。码字不易&#x…

【JavaScript 漫游】【002】JS 的数据类型总览

文章简介 本文为【JavaScript 漫游】专栏的第 002 篇文章&#xff0c;主要记录了笔者学习 JS 数据类型中所了解的基本知识点。 ES5 的数据类型有哪些如何区分 ES5 的数据类型null 和 undefined 的相同点和不同点布尔值的转换规则parseInt 和 parseFloat 的基本用法 作为 JS …

使用plotly dash 画3d圆柱(Python)

plotly3D &#xff08;3d charts in Python&#xff09;可以画3维图形 在做圆柱的3D装箱项目&#xff0c;需要装箱的可视化&#xff0c;但是Mesh &#xff08;3d mesh plots in Python&#xff09;只能画三角形&#xff0c;所以需要用多个三角形拼成一个圆柱&#xff08;想做立…

网站小程序分类目录网源码系统+会员注册登录功能 附带完整的搭建教程

随着互联网的发展&#xff0c;小程序分类目录网站已经成为了人们获取各类信息的重要渠道。而在这个领域中&#xff0c;罗峰给大家分享一款网站小程序分类目录网源码系统以其强大的功能和易用性&#xff0c;脱颖而出。本系统集成了会员注册登录功能&#xff0c;让用户能够更加便…

【git】git update-index --assume-unchanged(不改动.gitignore实现忽略文件)

文章目录 原因分析&#xff1a;添加忽略文件(取消跟踪)的命令&#xff1a;取消忽略文件(恢复跟踪)的命令&#xff1a;查看已经添加了忽略文件(取消跟踪)的命令&#xff1a; 原因分析&#xff1a; 已经维护的项目&#xff0c;文件已经被追踪&#xff0c;gitignore文件不方便修…

Layui + Echarts 5.0

Layui 怎么整合最新版本的 Echarts 5.0&#xff0c;Echarts 4 升级到 5后&#xff0c;有了很大改变&#xff0c;新的配置项4是无法兼容的&#xff0c;所以想要使用新的功能&#xff0c;都需要升级&#xff01; 新建一个echarts.js文件 layui.define(function (exports) {// 这…

Optional lab: Linear Regression using Scikit-LearnⅠ

scikit-learn是一个开源的、可用于商业的机器学习工具包&#xff0c;此工具包包含本课程中需要使用的许多算法的实现 Goals In this lab you will utilize scikit-learn to implement linear regression using Gradient Descent Tools You will utilize functions from sci…

微服务技术总结

微服务&#xff01; SrpingClound 微服务主要解决项目拆分后所产生的一系列问题。SpringClound主要解决服务的治理问题 单体VS分布式 单体&#xff1a;部署简单、成本低 缺点&#xff1a;服务耦合度高 2兼容1 服务拆分注意事项 远程调用分析 提供者&#xff1a;服务的提供方…

QT 使用XML保存操作记录

文章目录 1 实现程序保存操作记录的思路2 XML文档基本结构3 QDomDocument实现XML读写3.1 QDomDocument实现生成XML文件3.2 QDomDocument实现读取XML文件 4 QXmlStreamWriter实现读写4.1 QXmlStreamWriter实现生成XML4.2 QXmlStreamWriter实现读取XML 1 实现程序保存操作记录的思…