在 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. law Intermediate walkthrough pg

    靶场很简单分数只有10分跟平常做的20分的中级靶场比确实简单 我拿来放松的 算下来30分钟解决战斗 nmap 扫到80端口web界面 是个框架 搜exp https://www.exploit-db. ...

  2. 自适应 Simpson 积分法学习笔记

    自适应 Simpson 积分法,是一种计算一段区间内,形态奇怪的函数和的算法,例如面积并和难以直接用通项公式计算的函数. Simpson 积分 我们都知道,求解微积分需要求解一个导数的原函数,但这显然 ...

  3. Ansible - [03] Ansible ad-hoc模式

    Ansible ad-hoc是一种通过命令行批量管理的方式 格式:ansible 主机集合 -m 模块名 -a "参数" 其他参数: -k 使用密码远程.-i 指定主机列表文件 以 ...

  4. 网线 - 568B接法

  5. ubuntu更换国内镜像源备忘

    源的路径: /etc/apt/sources.list 更换前备份一下: sudo cp /etc/apt/sources.list /etc/apt/sources_init.list 打开文档,修 ...

  6. 2024CSP-S邮寄

    前言 去年被沉重打击到了,不过从此以后心态就好很多了,不会因为什么考试动不动就崩溃了. 考前 一直在认真复习,也停了课,甚至差点错过运动会.从国庆开始听了几天课,消化课件,然后考试.考试的稳定性不高, ...

  7. CF2043C Sums on Segments

    题意概要 一个数组,最多有一个数的绝对值不是 \(1\),求出所有可以得到的区间和. 思路 这里提供一个 数据结构优化查询前缀和最值 的做法. 最多有一个数的绝对值不是 \(1\),那我们可以先忽略掉 ...

  8. python 二级 第三方库(pip 、pyinstaller、jieba、wordcloud)

    安装方式 首选pip安装,pip安装失败选择自定义安装.文件安装,一般windows系统pip安装有时会失败 pip安装 pip -h 查看指令 自定义安装 路径: https://www.scipy ...

  9. js回忆录(5),终章

    无论走到哪里,都应该记住,过去都是假的,回忆是一条没有尽头的路,一切以往的春天都不复存在,就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实. --马尔克斯 <百年孤独> 人生就 ...

  10. linux centos8 mirrorlist: No URLs in mirrorlist,更新yum源

    前言 由于官方已经在2021/12/31停止了对CentOS 8的支持,所以需要更新 yum 源,才能使用 更新镜像源 这里用的是阿里的 yum 镜像源 将源文件备份 cd /etc/yum.repo ...