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.下面进行案例演示:

相关推荐
摸鱼的春哥5 小时前
Agent教程15:认识LangChain(中),状态机思维
前端·javascript·后端
明月_清风5 小时前
告别遮挡:用 scroll-padding 实现优雅的锚点跳转
前端·javascript
明月_清风5 小时前
原生 JS 侧边栏缩放:从 DOM 监听到底层优化
前端·javascript
万少14 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站16 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名19 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫19 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊19 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter19 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折19 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium