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之this.$router.push页面刷新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了Vue scoped及deep使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要介绍了vue中require与import的区别详解,require相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数,再把require的结果赋值给某个变量,需要的朋友可以参考下2023-10-10
今天小编就为大家分享一篇vue首次赋值不触发watch的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文讲述了如何使用Vue.js中的ElementUI组件库实现el-menu与el-tabs的联动,通过在el-menu中选择菜单项,可以切换el-tabs的内容区域,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
这篇文章主要为大家详细介绍了vue component组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
下面小编就为大家分享一篇vue实现在表格里,取每行的id的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件,下面这篇文章主要给大家介绍了关于vue项目中main.js使用方法的相关资料,需要的朋友可以参考下2022-07-07
Vue Camera组件是一个用于在Web应用中使用摄像头的Vue插件,它提供了一些常见的功能和方法来控制摄像头和捕获图像或视频数据,本文给大家介绍Vue Camera组件的常见功能和使用方法,感兴趣的朋友一起看看吧2023-11-11
VUE2.0+Element-UI+Echarts封装的组件实例
下面小编就为大家分享一篇VUE2.0+Element-UI+Echarts封装的组件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论