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