vue3在構建時使用魔法糖語法時defineProps和defineEmits的注意事項小結
1.vue2和vue3區(qū)別
1.1 vue3中vue是一個對象，可以使用按需導入
import {createApp} from 'vue ’
1.2 導入區(qū)別
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>開發(fā)環(huán)境編譯時會提示
[@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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了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中，子組件如果想修改父組件的變量，一般做法是通過綁定事件的方法，父組件向子組件傳遞修改變量的方法，子組件觸發(fā)修改變量的方法執(zhí)行，這種方式中規(guī)中矩；另一種方法是使用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