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 ...
随机推荐
- RSA 小规模演算
原理 秘钥生成 加解密 解密验证 小规模演算
- 极客时间《Redis核心技术与实战》阅读笔记
极客时间<Redis核心技术与实战>阅读笔记 数据结构 为了实现从键到值的快速访问,Redis 使用了一个哈希表来保存所有键值对. 哈希桶中的元素保存的并不 ...
- Jenkins执行Shell脚本超时错误处理指南
Jenkins执行Shell脚本超时错误处理指南 在使用Jenkins进行自动化测试时,经常会遇到需要执行Shell脚本的情况.然而,当Shell脚本执行时间过长,超过了Jenkins配置的超时限制时 ...
- DP(优化)
史不分好坏.是史就应该冲进. 细节见其他题解. P10538 首先建出部分分 sub1 的图,发现是 DAG,于是设点为状态,即即将乘坐 \(j\) 车的最小代价 \(f_j\).这样的转移就是枚举上 ...
- linux创建快捷方式
第一方法设置软连接 ln -s test.log test2.log 第二方法 第一步 新建 /usr/share/applications 目录下的某个快捷方式文件 如 touch /usr ...
- linux下创建idea的桌面快捷方式
!!!使用linux系统安装idea才会用到: 在桌面上,新建文件,命名为:idea.desktop , (或者在别的地方创建后再放到桌面) 使用 vim 编辑该文件(或者不新建,直接vi idea. ...
- autohue.js:让你的图片和背景融为一体,绝了!
需求 先来看这样一个场景,拿一个网站举例 这里有一个常见的网站 banner 图容器,大小为为 1910*560 ,看起来背景图完美的充满了宽度,但是图片原始大小时,却是: 它的宽度只有 1440 , ...
- C语言中的*和&符号
之前对*和&符号一直理解的比较浅显.只知道: *p好像表示的是一个指针: &p表示的是一个地址. 然而这次当遇到了下面这个情况的时候: int a = 10; int *b = &am ...
- Mysql创建数据库字符集的选择
字符集选择: 在国内正常都是用[UTF-8] 排序选择:排序一般分为两种:utf_bin和utf_general_cibin 是二进制, a 和 A 会别区别对待. utf8_general_ci [ ...
- scala - [01] 概述
题记部分 001 || 介绍 (1)Spark -- 新一代内存级大数据计算框架,是大数据的重要内容 (2)Spark就是使用Scala编写的.因此为了更好的学习Spark,需要掌握Scala. (3 ...