Vue3-新特性defineOptions和defineModel
defineOptions
问题:用了<script setup>后,就无法添加与其平级的属性了,比如定义组件的name或其他自定义的属性。
为了解决这一问题,引入了defineProps与defineEmits这两个宏,但这只解决了props与emits这两个属性。如果要定义其他的平级属性,还是得回到最原始的用法--就再添加一个普通的<script>标签。这样就会存在两个<script>标签,让人无法接受。
所以在Vue3.3中新引入了defineOptions宏。顾名思义,主要是用来定义Option API的选项。可以用defineOptions定义任意的选项,props、emits、expose、slots除外(因为这些可以使用defineXXX来做到)
<script setup>
import { defineOptions } from 'vue'
defineOptions({name: 'Foo',//组件重命名inheritAttrs: false,//...更多自定义属性
})
</script>
defineModel
试验型,快速实现双向绑定,简化v-model
在Vue3中,自定义组件上使用v-model,相当于传递一个modelValue属性,同时触发update:modelValue事件
<Child v-model="isVisible">
//相当于
<Child :modelValue="isVisible" @update:modelValue="isVisible=$event">
我们需要先定义props,再定义emits。其中有许多重复的代码。如果需要修改此值,还需要手动调动emit函数
父组件:
<template><inputModel v-model="txt"></inputModel>{{ txt }}
</template><script setup>
import inputModel from '@/components/inputModel.vue'
import { ref } from 'vue'
const txt = ref(100)
</script>
子组件:
<script setup>
import { defineProps, defineEmits } from 'vue'
defineProps({modelValue: String
})
const emit = defineEmits(['update:modelValue'])
</script>
<template><div><input type="text" :value="modelValue" @input="e => emit('update:modelValue', e.target.value)"></div>
</template>
<style scoped>
input {width: 14rem;height: 2rem;
}
</style>
使用defineModel改进后的子组件:
相关文章:
Vue3-新特性defineOptions和defineModel
defineOptions 问题:用了<script setup>后,就无法添加与其平级的属性了,比如定义组件的name或其他自定义的属性。 为了解决这一问题,引入了defineProps与defineEmits这两个宏,但这只解决了props与emits这两个属…...
【计算机基础】通过插件plantuml,实现在VScode里面绘制状态机
📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨ 📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢:文章若有幸对你有帮助,可点赞 👍…...
Linux常用基础命令及重要目录,配置文件功能介绍
目录 一,Linux常用必备基础命令 1,网络类命令 2,文件目录类命令 3,操作类命令 4,关机重启命令 5,帮助命令 6,查看显示类命令 7,命令常用快捷键 二,Linux重要目录…...
Oracle登录认证方式详解
文章目录 一、简介二、OS认证三、口令认证四、remote_login_passwordfile 详解 一、简介 在数据库管理中,登录认证是确保数据库安全性的重要环节。Oracle数据库提供 了两种认证方式,一种是“操作系统认证”,一种是“口令文件认证,…...
ate测试原理及ate测试系统(软件)知识科普 -纳米软件
ATE(Automatic Test Equipment)测试也叫自动化测试,通过计算机控制测试仪器对被测对象进行测试。以计算机编程代替人工测试,基于测试程序控制仪器并对待测品进行输入和输出信号检测分析,从而判断待测品的性能是否符合要求。 ATE测试需要根据测…...
Linux | 创建 | 删除 | 查看 | 基本命名详解
Linux | 创建 | 删除 | 查看 | 基本命名详解 文章目录 Linux | 创建 | 删除 | 查看 | 基本命名详解前言一、安装Linux1.1 方法一:云服务器方式1.2 方法二:虚拟机方式 二、ls2.2 ll 三、which3.1 ls -ld 四、pwd五、cd5.1 cd .\.5.2 ls -al5.3 重新认识命…...
搭配:基于OpenCV的边缘检测实战
引言 计算机中的目标检测与人类识别物体的方式相似。作为人类,我们可以分辨出狗的形象,因为狗的特征是独特的。尾巴、形状、鼻子、舌头等特征综合在一起,帮助我们把狗和牛区分开来。 同样,计算机能够通过检测与估计物体的结构和性…...
AI大发展:人机交互、智能生活全解析
目录 编辑 人工智能对我们的生活影响有多大 人工智能的应用领域 一、机器学习与深度学习 二、计算机视觉 三、自然语言处理 四、机器人技术 五、智能推荐系统 六、智能城市和智能家居 编辑 自己对人工智能的应用 自己的人工智能看法:以ChatGPT为例 …...
Django DRF序列化器serializer
以下案例由浅到深,逐步深入,通过实例介绍了序列化器的使用方法,和遇到的常见问题的解决方法。 一、序列化器serializers.Serializer 1、urls.py urlpatterns [path("api/<str:version>/depart/",views.DepartView.as_vie…...
【开源】基于JAVA的衣物搭配系统
项目编号: S 016 ,文末获取源码。 \color{red}{项目编号:S016,文末获取源码。} 项目编号:S016,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 衣物档案模块2.2 衣物搭配模块2.3 衣…...
Spark---基于Standalone模式提交任务
Standalone模式两种提交任务方式 一、Standalone-client提交任务方式 1、提交命令 ./spark-submit --master spark://mynode1:7077 --class org.apache.spark.examples.SparkPi ../examples/jars/spark-examples_2.11-2.3.1.jar 100 或者 ./spark-submit --master spark…...
webrtc的RTCPeerConnection使用
背景: 平时我们很少会需要使用到点对点单独的通讯,即p2p,一般都是点对服务端通讯,但p2p也有自己的好处,即通讯不经过服务端,从服务端角度这个省了带宽和压力,从客户端角度,通讯是安全,且快速的,当然有些情况下可能速度并不一定快。那么如何实现p2p呢? 解决办法: …...
【视觉SLAM十四讲学习笔记】第三讲——Eigen库
专栏系列文章如下: 【视觉SLAM十四讲学习笔记】第一讲——SLAM介绍 【视觉SLAM十四讲学习笔记】第二讲——初识SLAM 【视觉SLAM十四讲学习笔记】第三讲——旋转矩阵 本章将介绍视觉SLAM的基本问题之一:如何描述刚体在三维空间中的运动? Eigen…...
Ubuntu开机显示recovering journal,进入emergency mode
在一次正常的shutdown -r now之后,服务器启动不起来了,登录界面显示recovering journal,主要报错信息如下所示: /dev/sda2:recovering journal /dev/sda2:Clearn... You are in emergency mode. After logging in, type journalc…...
C++_String增删查改模拟实现
C_String增删查改模拟实现 前言一、string默认构造、析构函数、拷贝构造、赋值重载1.1 默认构造1.2 析构函数1.3 拷贝构造1.4 赋值重载 二、迭代器和范围for三、元素相关:operator[ ]四、容量相关:size、resize、capacity、reserve4.1 size、capacity4.2…...
LeeCode前端算法基础100题(2)- 最多水的容器
一、问题详情: 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明:…...
排序算法--归并排序
实现逻辑 ① 将序列每相邻两个数字进行归并操作,形成floor(n/2)个序列,排序后每个序列包含两个元素 ② 将上述序列再次归并,形成floor(n/4)个序列,每个序列包含四个元素 ③ 重复步骤②,直到所有元素排序完毕 void pri…...
【LeetCode:1410. HTML 实体解析器 | 模拟+哈希表+字符串+库函数】
🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…...
基于SSM的公司仓库管理系统(有报告)。Javaee项目
演示视频: 基于SSM的公司仓库管理系统(有报告)。Javaee项目 项目介绍: 采用M(model)V(view)C(controller)三层体系结构,通过Spring SpringMvc …...
spark数据倾斜的解决思路
数据倾斜是:多个分区中,某个分区的数据比其他分区的数据多的多 数据倾斜导致的问题: 导致某个spark任务耗时较长,导致整个任务耗时增加,甚至出现OOM运行速度慢:主要发生在shuffle阶段,同样的k…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
