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 ...
随机推荐
- JVM虚拟机中的内存区域
- java注释转json插件开发实战
目的 将java的代码注释转换为json格式,并写入文件 本文介绍了完整的开发流程及如何使用 运行环境 jdk1.8 maven3.x 设计思想 系统构思 编译完成的class里没有注释的,所以注释信 ...
- 让你看懂dart中静态成员和继承
静态属性和静态方法 在dart中,我们可以通过关键字 static来定义静态属性和静态方法. 需要注意的是: 静态方法不能访问非静态属性[结论1] 非静态方法可以访问静态成员[结论2] 我们通过下面的 ...
- Windows中安装和配置Maven
1.下载 下载地址:https://maven.apache.org/download.cgi 下载文件:https://dlcdn.apache.org/maven/maven-3/3.9.6/bi ...
- Goh:一款Go语言的预编译快速模板引擎。(Benchmark排名第一)
https://github.com/OblivionOcean/Goh Goh 是一款Go语言的预编译快速模板引擎. English | 简体中文 目录 特性 性能测试 安装 使用 语法 特性 预编 ...
- 面试官:说说你项目中JWT的执行流程?
JWT 在目前的项目开发中使用到的频率是非常高的,因此它也是面试常问的一类问题,所以今天我们就来看看"项目中 JWT 的执行流程?"这个问题. 1.什么是 JWT? JWT(JSO ...
- Trae初体验
前情 自从AI IDE面世以来,网络上到处流传程序员要失业了,小白也能轻松完成程序开发了,某某0基础靠AI上架了苹果应用,平时工作也有偶尔用用AI工具的我,都觉得这些都是标题党文章不予理会的,直到看到 ...
- 大量小文件不适合存储于HDFS的原因
1.小文件过多,会过多占用namenode的内存,并浪费block. - 文件的元数据(包括文件被分成了哪些blocks,每个block存储在哪些服务器的哪个block块上),都是存储在namenod ...
- 分布式锁—2.Redisson的可重入锁
大纲 1.Redisson可重入锁RedissonLock概述 2.可重入锁源码之创建RedissonClient实例 3.可重入锁源码之lua脚本加锁逻辑 4.可重入锁源码之WatchDog维持加锁 ...
- browser-use 对 playwright 做了哪些事情
browser-use 是基于 Playwright 的增强工具,专注于将 AI 代理与浏览器自动化结合,通过简化操作和扩展功能提升了开发效率. 以下是它对 Playwright 的主要增强点: AI ...