vue3在構(gòu)建時使用魔法糖語法時defineProps和defineEmits的注意事項小結(jié)
1.vue2和vue3區(qū)別
1.1 vue3中vue是一個對象，可以使用按需導(dǎo)入
import {createApp} from 'vue ’
1.2 導(dǎo)入?yún)^(qū)別
vue2中使用的vue-router3.0導(dǎo)入的是構(gòu)造函數(shù) new VueRouter()
vue3中使用的vue-router4.0導(dǎo)入的是對象 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預(yù)處理器)
接下來介紹vue3在構(gòu)建時，使用魔法糖語法時defineProps和defineEmits的注意事項、
在 Vue 3.2+ 版本中，可以使用 <script setup> 替代傳統(tǒng)的 script標(biāo)簽來編寫組件，它提供了更簡潔的語法來編寫 Composition API 代碼。
在 <script setup> 中，使用 defineProps 和 defineEmits時需要注意：
- 如果顯式地導(dǎo)入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 現(xiàn)在是編譯器宏（compiler macros），這意味著你不再需要顯式地從 'vue' 包中導(dǎo)入它們。這些宏在 <script setup> 的上下文中是自動可用的。
- 如果不顯式導(dǎo)出有可能提示以下錯誤
ERROR Failed to compile with 1 error [eslint] 40:1 error 'defineProps' is not defined no-undef
要解決以上問題，既不重復(fù)導(dǎo)入又不在編譯時提示warning，可以在package.json里添加一行配置：
package.json
...
"eslintConfig": {
"root": true,
"env": {
"node": true,
"vue/setup-compiler-macros": true #添加這行配置
},
...到此這篇關(guān)于vue3在構(gòu)建時使用魔法糖語法時defineProps和defineEmits的注意事項小結(jié)的文章就介紹到這了,更多相關(guān)vue3 defineProps和defineEmits內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+element?tree懶加載更新數(shù)據(jù),文中給大家補充介紹了Vue Element Ui 樹形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新的詳細(xì)代碼，感興趣的朋友跟隨小編一起看看吧2022-09-09
Vue+Openlayer實現(xiàn)圖形的拖動和旋轉(zhuǎn)變形效果
Openlayer具有自己的擴(kuò)展插件ol-ext，可以用來實現(xiàn)圖形的拖拽、旋轉(zhuǎn)、縮放、拉伸、移動等操作，本文將主要介紹通過Openlayer實現(xiàn)圖形的拖動和旋轉(zhuǎn)，需要的同學(xué)可以學(xué)習(xí)一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了基于Vue實現(xiàn)圖書管理功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Vue3?全局實例上掛載屬性方法，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
一文帶你深入理解Vue3中Composition API的使用
Composition API 是 Vue 3 中的一項強大功能,它改進(jìn)了代碼組織和重用,使得構(gòu)建組件更加靈活和可維護(hù),本文我們將深入探討 Composition API 的各個方面,希望對大家有所幫助2023-10-10
在vue中，子組件如果想修改父組件的變量，一般做法是通過綁定事件的方法，父組件向子組件傳遞修改變量的方法，子組件觸發(fā)修改變量的方法執(zhí)行，這種方式中規(guī)中矩；另一種方法是使用sync修飾符，此方法可以減少很多代碼量2022-08-08
下面小編就為大家分享一篇使用vue中的v-for遍歷二維數(shù)組的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
基于vue實現(xiàn)滾動條滾動到指定位置對應(yīng)位置數(shù)字進(jìn)行tween特效
這篇文章主要介紹了基于vue實現(xiàn)滾動條滾動到指定位置對應(yīng)位置數(shù)字進(jìn)行tween特效,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
vue實現(xiàn)多個el-form表單提交統(tǒng)一校驗的2個方法
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)多個el-form表單提交統(tǒng)一校驗的2個方法,文中通過代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)或使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue中Promise的使用方法詳情，Promise可以說是異步編程的一種解決方法,主要是為了解決代碼亂的情景而出現(xiàn)的,下文介紹其具體用法，需要的小伙伴可以參考一下2022-03-03