在 Vue 3.2+ 版本中,可以使用 <script setup> 替代传统的 script标签来编写组件,它提供了更简洁的语法来编写 Composition API 代码。

在 <script setup> 中,使用 defineProps 和 defineEmits时需要注意:

  1. 如果显式地导入defineProps时,在编译时会提示以下wanning
<script steup>
import { defineProps } from 'vue';
...
</script>

开发环境编译时会提示

[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.

原因是在 <script setup>中,defineProps 和 defineEmits 现在是编译器宏(compiler macros),这意味着你不再需要显式地从 'vue' 包中导入它们。这些宏在 <script setup> 的上下文中是自动可用的。

  1. 如果不显式导出有可能提示以下错误
 ERROR  Failed to compile with 1 error

[eslint]
40:1 error 'defineProps' is not defined no-undef

要解决以上问题,既不重复导入又不在编译时提示warning,可以在package.json里添加一行配置:

package.json

  ...
"eslintConfig": {
"root": true,
"env": {
"node": true,
"vue/setup-compiler-macros": true #添加这行配置
},
...

vue3在构建时,使用魔法糖语法时defineProps和defineEmits的注意事项的更多相关文章

  1. 【Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具

    前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...

  2. 快速构建Windows 8风格应用28-临时应用数据

    原文:快速构建Windows 8风格应用28-临时应用数据 本篇博文主要介绍临时应用数据概览.如何构建临时应用数据. 一.临时应用数据概览 临时应用数据相当于网页中缓存,这些数据文件是不能够漫游的,并 ...

  3. notepad++新建文档时,会出现语法错误的红色下波浪线

    notepad++新建文档时,会出现语法错误的红色下波浪线: 原因:新建文档时默认设置语言为PHP. 解决方法:修改默认语言为java或JavaScript,如下: 小结:打开文档时,也可能出现下波浪 ...

  4. Java检查异常、非检查异常、运行时异常、非运行时异常的区别

    Java把所有的非正常情况分为两种:异常(Exception)和错误(Error),它们都继承Throwable父类. Java的异常(Exception和Error)分为检查异常和非检查的异常. 其 ...

  5. Java检查异常和非检查异常,运行时异常和非运行时异常的区别

    通常,Java的异常(包括Exception和Error)分为检查异常(checked exceptions)和非检查的异常(unchecked exceptions).其中根据Exception异常 ...

  6. Java运行时异常与非运行时异常

    Java运行时异常与非运行时异常 Exception(异常)是程序本身可以处理的异常.主要包含RuntimeException等运行时异常和IOException,SQLException等非运行时异 ...

  7. [转]使用Maven添加依赖项时(Add Dependency)时,没有提示项目可用,并且在Console中,输出: Unable to update index for central|http://repo1.maven.org/maven2 。

    使用Maven添加依赖项时(Add Dependency)时,没有提示项目可用,并且在Console中,输出: Unable to update index for central|http://re ...

  8. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  9. 解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位

    $(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...

  10. c/c++编译时,指定程序运行时查找的动态链接库路径

    http://blog.csdn.net/tsxw24/article/details/10220735 c/c++编译时,指定程序运行时查找的动态链接库路径 分类: c/c++ linux 2013 ...

随机推荐

  1. Drawable图形定制

    设置背景设置背景 button或者textview我们想要自定义他的背景就需要用到Drawable中创建xml文件 例如 shape标签是用来控制背景的形状的 他下面的子标签有 stroke控制描边 ...

  2. DAB实现中用到的主要设计模式

    DAB C++ 版本设计模式应用实践 1. 命令模式 (Command Pattern) 设计目标 模块解耦:实现各模块独立编译.测试.运行,消除模块间直接依赖 扩展准备:为桥接模式实现奠定基础 依赖 ...

  3. 份额大涨! 天翼云稳居中国公有云laaS市场、laaS+PaaS市场第三!

    近日,国际数据公司(IDC)最新发布的<公有云市场数据跟踪,2023Q3>报告显示,在公有云整体市场增速全面收紧的背景下,中国电信天翼云市场份额大涨,中国公有云IaaS市场份额增长至12. ...

  4. 设置npm、yarn和pnpm的国内镜像地址和yarn命令相关问题

    1.npm 全局设置: 输入如下命令查看镜像地址: npm config get registry 输入如下命令设置镜像地址为淘宝: // 推荐地址 npm config set registry h ...

  5. Django设置跨域请求解决方案

    Django设置跨域请求解决方案 在现代Web开发中,跨域资源共享(CORS,Cross-Origin Resource Sharing)是一个常见的需求.尤其是在前后端分离的开发模式下,Django ...

  6. Luogu P11543 Code+#5 我有矩阵,你有吗? 题解 [ 绿 ] [ 扩展域并查集 ]

    我有矩阵,你有吗?:并查集小清新题. 思路 看到这题,我第一个想到的竟然是高斯消元. 首先一行和一列肯定不会操作两次以上,不然一定可以等效为操作 \(0\) 次和操作 \(1\) 次的情况. 于是我们 ...

  7. 你还不会使用curl发送请求吗?一篇博客搞定!

    前言:以下均为Windows使用,使用前不需要任何准备,打开命令提示符根据指令即可使用关键字: curl 注意: 建议在请求前ping一下 ping http://www.123.com 或 ping ...

  8. AD22 solder层开窗不见了什么原因?PCB阻焊层不显示阻焊。

    做回来的板子焊盘没有开窗! 3D上看也是没有的! 上网查了,在设计->规则->Mask->SolderMaskExpansion 将盖油勾选去掉即可. END

  9. VsCode安装Copilot详细教程

    安装GitHub Copilot插件前,您需要安装以下软件: 安装Visual Studio Code:前往https://code.visualstudio.com下载并安装最新版的Visual S ...

  10. luogu-P10596题解

    简要题意 一个有 \(N\) 个元素的集合有 \(2N\) 个不同子集(包含空集),现在要在这 \(2N\) 个集合中取出若干集合(至少一个),使得它们的交集的元素个数为 \(K\),求取法的方案数, ...