当前位置: 首页 > news >正文

vue3新特性-defineOptions和defineModel

defineOptions

背景说明:

有 <script setup> 之前,如果要定义 props,  emits 可以轻而易举地添加一个与 setup 平级的属性。 但是用了 <script setup>  后,就没法这么干了 setup 属性已经没有了,自然无法添加与其平级的属性。

为了解决这一问题,引入了 defineProps  与  defineEmits 这两个宏。但这只解决了 props 与 emits 这两个属性。如果我们要定义组件的 name 或其他自定义的属性,还是得回到最原始的用法——再添加一个普通的 <script> 标签。
这样就会存在两个 <script> 标签。让人无法接受。

所以在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义,主要是用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项, props, emits, expose, slots 除外(因为这些可以使用 defineXXX 来做到)

 defineModel

Vue3 中的 v-model 和 defineModel

在Vue3中,自定义组件上使用v-model, 相当于传递一个modelValue属性,同时触发 update:modelValue 事件

我们需要先定义 props,再定义 emits 。其中有许多重复的代码。如果需要修改此值,还需要手动调用 emit 函数

于是乎 defineModel 诞生了。

生效需要配置 vite.config.js

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue({script: {defineModel: true}}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

相关文章:

  • 2024 Sora来了!“手机Agent智能体”也来了!
  • MyBatis Plus:自定义typeHandler类型处理器
  • Autodesk CAD如何建立图层方框?
  • Python学习笔记——PySide6设计GUI应用之UI与逻辑分离
  • git中将所有修改的文件上传到暂存区
  • 探索最新AI视频生成技术——OpenAI Sora模型的机遇和挑战
  • websoket
  • CTR之行为序列建模用户兴趣:DIN
  • 用于将Grafana默认数据库sqlite3迁移到MySQL数据库
  • 如何用GPT进行成像光谱遥感数据处理?
  • HarmonyOS Stage模型 权限申请
  • 论文阅读:How Do Neural Networks See Depth in Single Images?
  • SQLite 的使用
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-19-处理鼠标拖拽-中篇
  • 一款跳转警告HTML单页模板源码
  • 收藏网友的 源程序下载网
  • CentOS学习笔记 - 12. Nginx搭建Centos7.5远程repo
  • CSS实用技巧
  • download使用浅析
  • HomeBrew常规使用教程
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • js 实现textarea输入字数提示
  • leetcode讲解--894. All Possible Full Binary Trees
  • node 版本过低
  • SpringCloud集成分布式事务LCN (一)
  • Vue2.x学习三:事件处理生命周期钩子
  • 成为一名优秀的Developer的书单
  • 基于组件的设计工作流与界面抽象
  • 简单易用的leetcode开发测试工具(npm)
  • 蓝海存储开关机注意事项总结
  • 盘点那些不知名却常用的 Git 操作
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • 设计模式(12)迭代器模式(讲解+应用)
  • 用 vue 组件自定义 v-model, 实现一个 Tab 组件。
  • 在Mac OS X上安装 Ruby运行环境
  • ​渐进式Web应用PWA的未来
  • "无招胜有招"nbsp;史上最全的互…
  • #AngularJS#$sce.trustAsResourceUrl
  • #Ubuntu(修改root信息)
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (31)对象的克隆
  • (分布式缓存)Redis分片集群
  • (转)全文检索技术学习(三)——Lucene支持中文分词
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .NET 5种线程安全集合
  • .NET Reactor简单使用教程
  • .NET下ASPX编程的几个小问题
  • @select 怎么写存储过程_你知道select语句和update语句分别是怎么执行的吗?
  • @synthesize和@dynamic分别有什么作用?
  • @拔赤:Web前端开发十日谈
  • @开发者,一文搞懂什么是 C# 计时器!
  • [bzoj 3124][sdoi 2013 省选] 直径
  • [BZOJ5125]小Q的书架(决策单调性+分治DP+树状数组)