快捷導(dǎo)航

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

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

在 Vue 3.2+ 版本中,可以使用 <script setup> 替代傳統(tǒng)的 script標(biāo)簽來編寫組件,它提供了更簡(jiǎn)潔的語法來編寫 Composition API 代碼,這篇文章主要介紹了vue3在構(gòu)建時(shí)使用魔法糖語法時(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 語法

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)建時(shí)，使用魔法糖語法時(shí)defineProps和defineEmits的注意事項(xiàng)、

在 Vue 3.2+ 版本中，可以使用 <script setup> 替代傳統(tǒng)的 script標(biāo)簽來編寫組件，它提供了更簡(jiǎn)潔的語法來編寫 Composition API 代碼。

在 <script setup> 中，使用 defineProps 和 defineEmits時(shí)需要注意：

如果顯式地導(dǎo)入defineProps時(shí)，在編譯時(shí)會(huì)提示以下wanning

<script steup>
import { defineProps } from 'vue';
...
</script>

開發(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

要解決以上問題，既不重復(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í)使用魔法糖語法時(shí)defineProps和defineEmits的注意事項(xiàng)小結(jié)的文章就介紹到這了,更多相關(guān)vue3 defineProps和defineEmits內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: