快捷導(dǎo)航

vue3在構(gòu)建時使用魔法糖語法時defineProps和defineEmits的注意事項小結(jié)

更新時間：2024年04月15日 09:29:09 作者：小透明落在星田

在 Vue 3.2+ 版本中,可以使用 <script setup> 替代傳統(tǒng)的 script標(biāo)簽來編寫組件,它提供了更簡潔的語法來編寫 Composition API 代碼,這篇文章主要介紹了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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: