vue3在构建时使用魔法糖语法时defineProps和defineEmits的注意事项小结
1.vue2和vue3区别
1.1 vue3中vue是一个对象，可以使用按需导入
import {createApp} from 'vue ’
1.2 导入区别
vue2中使用的vue-router3.0导入的是构造函数 new VueRouter()
vue3中使用的vue-router4.0导入的是对象 createRouter()
1.3 语法
vue2语法在vue3中都可以使用，除了过滤器并不能使用
2. vue3脚手架
脚手架中的路由有三种模式：历史模式history、哈希模式hash、抽象模式abstract
2.1 脚手架配置
vue create projectname------Manually select features--------Babel(js编译器)、Router、Vuex、CSS Pre-processors(css预处理器)
接下来介绍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的注意事项小结的文章就介绍到这了,更多相关vue3 defineProps和defineEmits内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue+element tree懒加载更新数据,文中给大家补充介绍了Vue Element Ui 树形表懒加载新增、修改、删除等操作后局部数据更新的详细代码，感兴趣的朋友跟随小编一起看看吧2022-09-09
Openlayer具有自己的扩展插件ol-ext，可以用来实现图形的拖拽、旋转、缩放、拉伸、移动等操作，本文将主要介绍通过Openlayer实现图形的拖动和旋转，需要的同学可以学习一下2021-11-11
这篇文章主要为大家详细介绍了基于Vue实现图书管理功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了Vue3 全局实例上挂载属性方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
一文带你深入理解Vue3中Composition API的使用
Composition API 是 Vue 3 中的一项强大功能,它改进了代码组织和重用,使得构建组件更加灵活和可维护,本文我们将深入探讨 Composition API 的各个方面,希望对大家有所帮助2023-10-10
在vue中，子组件如果想修改父组件的变量，一般做法是通过绑定事件的方法，父组件向子组件传递修改变量的方法，子组件触发修改变量的方法执行，这种方式中规中矩；另一种方法是使用sync修饰符，此方法可以减少很多代码量2022-08-08
下面小编就为大家分享一篇使用vue中的v-for遍历二维数组的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
这篇文章主要介绍了基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要给大家介绍了关于vue实现多个el-form表单提交统一校验的2个方法,文中通过代码示例介绍的非常详细,对大家学习或使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue中Promise的使用方法详情，Promise可以说是异步编程的一种解决方法,主要是为了解决代码乱的情景而出现的,下文介绍其具体用法，需要的小伙伴可以参考一下2022-03-03
最新评论