Vue基础知识:Vue3.3出现的defineOptions,如何使用,解决了什么问题?

1.那么为什么会出现defineOptions?

原因说明:

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

如果不用setup的话,可以添加许多平级的属性。如图所示

但是用了setup语法糖就无法添加同级属性了,只能用编译器宏,defineExpose、defineEmit......

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

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

2.下面进行案例演示:

相关推荐
after you2 分钟前
【无标题】
前端·javascript
酷炫码神3 分钟前
Day 6|ES6+ 语法:把现代 JS 写顺手,从解构到 map / filter / reduce
前端·javascript·es6
lemon_sjdk15 分钟前
从一段真实的 Electron IM 前端代码,看高级前端的工程化修养
前端·electron·状态模式·im
晓得迷路了36 分钟前
栗子前端技术周刊第 150 期 - Stack Overflow 开发者调查结果、TanStack Start 1.0...
javascript·css·后端
vx_Biye_Design39 分钟前
PHP中医养生馆预约系统60841-计算机课程设计、毕业设计
vue.js·spring boot·后端·mysql·php·课程设计·express
IT_陈寒40 分钟前
Vite性能优化完全指南
前端·人工智能·后端
燕落南枝41 分钟前
HTML 表单入门:表单容器、文本框与密码框属性详解
前端·microsoft·html
TYC91 小时前
Mac创建Vue3+TypeScript或者React+TypeScript项目
前端·javascript·typescript
程序员小孔.1 小时前
基于 SpringBoot + UniApp + Vue 的家政服务系统设计与实现
前端·数据库·spring boot·python·docker·微信小程序
Profile排查笔记1 小时前
指纹浏览器 GitHub 项目怎么选?先看仓库交付的是工具、内核还是管理器
前端·人工智能·后端·自动化