vue3在构建时,使用魔法糖语法时defineProps和defineEmits的注意事项
在 Vue 3.2+ 版本中,可以使用 <script setup> 替代传统的 script标签来编写组件,它提供了更简洁的语法来编写 Composition API 代码。
在 <script setup> 中,使用 defineProps 和 defineEmits时需要注意:
- 如果显式地导入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> 的上下文中是自动可用的。
- 如果不显式导出有可能提示以下错误
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的注意事项的更多相关文章
- 【Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具
前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...
- 快速构建Windows 8风格应用28-临时应用数据
原文:快速构建Windows 8风格应用28-临时应用数据 本篇博文主要介绍临时应用数据概览.如何构建临时应用数据. 一.临时应用数据概览 临时应用数据相当于网页中缓存,这些数据文件是不能够漫游的,并 ...
- notepad++新建文档时,会出现语法错误的红色下波浪线
notepad++新建文档时,会出现语法错误的红色下波浪线: 原因:新建文档时默认设置语言为PHP. 解决方法:修改默认语言为java或JavaScript,如下: 小结:打开文档时,也可能出现下波浪 ...
- Java检查异常、非检查异常、运行时异常、非运行时异常的区别
Java把所有的非正常情况分为两种:异常(Exception)和错误(Error),它们都继承Throwable父类. Java的异常(Exception和Error)分为检查异常和非检查的异常. 其 ...
- Java检查异常和非检查异常,运行时异常和非运行时异常的区别
通常,Java的异常(包括Exception和Error)分为检查异常(checked exceptions)和非检查的异常(unchecked exceptions).其中根据Exception异常 ...
- Java运行时异常与非运行时异常
Java运行时异常与非运行时异常 Exception(异常)是程序本身可以处理的异常.主要包含RuntimeException等运行时异常和IOException,SQLException等非运行时异 ...
- [转]使用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 ...
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
- 解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位
$(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...
- c/c++编译时,指定程序运行时查找的动态链接库路径
http://blog.csdn.net/tsxw24/article/details/10220735 c/c++编译时,指定程序运行时查找的动态链接库路径 分类: c/c++ linux 2013 ...
随机推荐
- Go语言【Gin框架】:JSON、AsciiJSON、PureJSON和SecureJSON的区别
在Go语言中,JSON.AsciiJSON.PureJSON 和 SecureJSON 是Gin框架用于发送JSON响应的方法. 1. c.JSON 功能:将提供的数据序列化为标准的JSON格式,并将 ...
- delphi cxgrid保存正在编辑的行
procedure SaveGridViewEditing(AView: TcxGridDBTableView); overload; var vDst: TDataSet; begin // 应用未 ...
- Java03-程序流程控制
Java程序流程控制 [ 任务列表 ] 1.选择结构(if.switch) 2.循环结构(for.while.do-while) 3.跳转关键字(break.continue.return) 4.其他 ...
- Linux下安装jdk的两种方法
Linux下安装jdk的两种方式和安装mvn 有网的环境 yum方式下载安装1.查找java相关的列表 1 yum -y list java* 或者 1 yum search jdk 2.安装 ...
- Prometheus修改默认数据存储时间
Prometheus修改默认数据存储时间 Prometheus 的数据存储时间是通过命令行参数 --storage.tsdb.retention.time 来设置的.这个参数指定了 Prometheu ...
- Romberg 数值积分算法+P3779 题解
Romberg 算法 吊打 Simpson(?) 的且不玄学(没有什么十五倍)的数值积分算法. 缺点是过程复杂一点,但是只体现在证明上,代码很短. 铺垫算法 梯形求积公式 公式 \[\int _a^b ...
- IDEA引入大项目一直updating indices解决办法
一.如项目不需要某个目录建立索引 右键需要排除的项目
- RocketMQ实战—9.营销系统代码初版
大纲 1.基于条件和画像筛选用户的业务分析和实现 2.全量用户促销活动数据模型分析以及创建操作 3.Producer和Consumer的工程代码实现 4.基于抽象工厂模式的消息推送实现 5.全量用户促 ...
- go测试跨包代码覆盖率
Golang虽然只是一门编程语言,但也为我们提供了不少工具,其中测试工具是最常用的,大概 前提概要 以前看书,只说了用什么工具去做覆盖率,和基本的使用,当时看了也没想太多.后面真正做项目了,老大要求比 ...
- Mybatis中的 switch
我这遇到个问题,如果 type字段为null则查询type is null,否则查对应的值 询问 AI 得知,可以用choose-when-otherwise <select> selec ...