【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.hqwc.cn/news/439757.html

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

相关文章

Rust循环和函数

下面聊聊以下主题&#xff1a; 基于条件的分支循环函数属性测试 基于条件的分支 基于条件的分支&#xff0c;可以通过常见的 if、if else 或 if else if else 构造来完成&#xff0c;例如下面的示例&#xff1a; fn main() { let dead false; let health 48; if dead { p…

纯html+js+css个人博客

首页 <!DOCTYPE HTML> <html> <head> <title>博客</title> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <meta name"viewport" content"widthdevice-width, initial-sca…

仅4步,彻底玩转如何在Word中插入页脚数字

Word中首页无需添加数字&#xff0c;从第二页开始添加数字。 Step 1&#xff1a;如下图&#xff0c;将内容设定为如下&#xff0c;“首页不同”一定要选中&#xff1b; Step 2&#xff1a;选择工具栏中的“页码”&#xff1b; Step 3&#xff1a;接下来选择“页码”下的“设置…

十一、C++核心编程(1)内存分区模型

本阶段主要针对面向对象程技术做详细讲解&#xff0c;探讨C中的核心和精髓。 一、内存分区模型 1、C程序在执行时&#xff0c;将内存大方向划分为4个区域&#xff1a; 代码区:存放函数体的二进制代码&#xff0c;由操作系统进行管理的全局区:存放全局变量和静态变量以及常量…

使用PowerBI 基于Adventure Works案例分析

Adventure Works案例分析 前言 数据时代来临&#xff0c;但一个人要顺应时代的发展是真理。 数据分析的核心要素 那数分到底是什么&#xff1f; 显然DT 并不等同于 IT&#xff0c;我们需要的不仅仅是更快的服务器、更多的数据、更好用的工具。这些都是重要的组成部分&…

基于ldap实现登录认证

最近开发的应用需要外协人员实现登录认证&#xff0c;外协人员的密码等信息已经录入到ldap, 需要连接ldap进行登录认证。下面先介绍一下登录的网络旅程图。 一.nginx实现AES加密 nginx请求处理入口&#xff08;前端请求为json格式&#xff09; location /aes {default_type te…

this.$store undefined

报错&#xff1a;vuex报错 this.$store显示undefined&#xff0c;可能存在的问题&#xff0c;从以下几个方向排查 1、查看store文件中的vuex实例对象是否暴漏 2、main.js中是否注入store 3、如果上边均没问题&#xff0c;打开package.json&#xff0c;查看vue与vuex的版本&am…

系列五十、idea父子项目忽略部分文件

一、idea父子项目忽略部分文件 **/mvnw **/mvnw.cmd **/.mvn **/target/ .idea **/.gitignore

电商API接口的应用|电商跨境电商商品采集高效解决方案

电商API接口的应用|电商跨境电商商品采集高效解决方案 面对数十万亿元的跨境电商市场&#xff0c;以阿里巴巴国际站为代表的跨境电商数字平台&#xff0c;在政策、需求以及供应链的驱动下&#xff0c;为中小企业提供了全产业链、全供应链一体化综合服务&#xff0c;让越来越多…

Ansys Lumerical | 闪耀光栅

附件下载 联系工作人员获取附件 此示例说明如何计算闪耀光栅的光栅阶数。该光栅在每个波长处都有许多光栅阶数。为了捕获全反射和透射的特征&#xff0c;监视器中需要更多的频率点。 模拟设置 上面的仿真文件中显示了闪耀光栅。它由低折射率 &#xff08;1.4&#xff09; 基…

红黑树封装实现STL-map、set

利用红黑树作为模板封装的思路 将红黑树作为一个基础的类模板&#xff0c;通过给这个类模板传递不同的参数&#xff0c;从而控制它所实现的容器。 最主要的点是用自己的map和set通过传递不同的模板参数控制红黑树第二个模板参数 T 来确定传入的到底是 Key 还是 pair<Key, …

Java异常处理集合

Java异常处理 Java语言在执行后会中断&#xff0c;也就是在出错位置后的代码都不会被执行&#xff0c;为了使非致命错误后的程序仍然能够执行&#xff0c;引入异常处理机制。 异常 可处理的异常用Exception表示&#xff0c;不可处理的异常用Error表示&#xff0c;通常是栈内…