vue3在构建时,使用魔法糖语法时defineProps和defineEmits的注意事项

这篇具有很好参考价值的文章主要介绍了vue3在构建时,使用魔法糖语法时defineProps和defineEmits的注意事项。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在 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文章来源地址https://www.toymoban.com/news/detail-851383.html

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

到了这里,关于vue3在构建时,使用魔法糖语法时defineProps和defineEmits的注意事项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 defineEmits的使用

    以下代码和内容的使用都是在vue3的setup中,未使用TS。 1、计数器案例 父组件: 子组件: 页面渲染效果 2、案例说明 1、在父组件中定义一个变量 2、在子组件中定义+1和-1方法,以及一个变量 3、通过子组件事件修改变量值,同时将值传递给父组件,对父组件的变量进行赋值

    2024年02月12日
    浏览(38)
  • vue3 defineEmits

    简介:用于父子组件通信时,子组件向父组件传递数据,不需要被导入即可使用,会在编译 script setup 语法块时一同编译。注意的是 defineEmits 只能在 script setup 的顶层使用 使用 1、定义子组件 2、定义父组件

    2024年02月09日
    浏览(30)
  • vue3的组件事件和defineEmits

    子组件有时候需要与父组件进行交互,子组件需要通知父组件做一些事(比如:prop是单向数据量,子组件不应该直接修改prop绑定的值,而是应该 抛出一个事件来通知父组件做出改变 ) 为了解决这个问题,组件实例提供了一个自定义事件系统,父组件可以通过 v-on 或 @ 来选

    2024年02月09日
    浏览(48)
  • vue3+vue-cli 报错 ‘defineProps‘ is not defined

      确保这些都存在,仍报错则需要修改node版本的 本人改到最新版就没什么问题了

    2024年02月12日
    浏览(48)
  • Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(useRouter,useRoute)的使用 路由懒加载、路由分包处理、魔法注释的使用

     html部分 js部分  html页面使用路由传来的参数  获取router跳转id 获取 路由跳转错误地址

    2024年02月11日
    浏览(38)
  • vue3 v-for遍历defineProps或者props接收的数据时,报“xx” is of type ‘unknown‘

    vue中使用ts,且在使用props或者defineProps进行父传子时,v-for遍历收到的数组,进行取值时,报“xx” is of type \\\'unknown\\\' 提示:ts进行类型推导造成的报错 提示:使用接口进行 提示:创建一个ts文件,放类型数据,在使用的页面进行引用            总结:前两个都有一个弊端,

    2024年02月16日
    浏览(37)
  • vue3中使用ref语法糖

    自从引入组合式 API 的概念以来,一个主要的未解决的问题就是 ref 和响应式对象到底用哪个。响应式对象存在解构丢失响应性的问题,而 ref 需要到处使用 .value 则感觉很繁琐,并且在没有类型系统的帮助时很容易漏掉 .value 以上是官方原话,大概就是新的语法糖,可以让我们更

    2023年04月09日
    浏览(43)
  • 【vue3】使用vite构建vue3项目

    ==😉博主:初映CY的前说(前端领域) ,📒本文核心:使用vite构建vue3项目 【前言】 当我们选择了vue3作为我们项目的开发,就更加的推荐使用vite来对我们的项目进行打包。很简单——这也是开发vue的团队开发的工具,因此支持性肯定比传统的打包工具好,下面我们就来使用vi

    2024年02月06日
    浏览(47)
  • 【前端】VUE3使用$ref()糖语法 去除.value

    Reactivity Transform | Vue Macros (sxzz.moe)

    2024年02月12日
    浏览(35)
  • Vue3项目中没有配置 TypeScript 支持,使用 TypeScript 语法

    1.安装 TypeScript:首先,需要在项目中安装 TypeScript。在终端中运行以下命令 2.创建 TypeScript 文件:在 Vue 3 项目中,可以创建一个以 .ts 后缀的文件,例如 MyComponent.ts。在这个文件中,可以使用 TypeScript 语法编写代码。 在上面的示例中,我们使用 defineComponent 函数来定义一个

    2024年02月15日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包