首頁  >  文章  >  web前端  >  聊聊vue3中的name屬性,看看怎麼使用!

聊聊vue3中的name屬性,看看怎麼使用!

青灯夜游
青灯夜游轉載
2022-09-14 19:42:464215瀏覽

如果你在 vue3 開發中使用了 <script setup> 語法的話,對於元件的 name 屬性,需要做一番額外的處理。以下這篇文章就來和大家聊聊vue3 name 屬性的使用技巧,希望對大家有幫助!

聊聊vue3中的name屬性,看看怎麼使用!

對於vue@3.2.34 及以上版本,在使用<script setup> 的單一檔案元件時,vue 會根據元件檔名,自動推導出name 屬性。也就是名為 MyComponent.vue 或 my-component.vue 的文件, name 屬性為 MyComponent,而當你在元件內顯示定義 name 屬性時,會覆寫推導出的名稱。 【相關推薦:vuejs影片教學

元件的name 屬性不僅能用於<KeepAlive>,而且在使用vuejs- devtools 外掛程式偵錯程式碼的時候,對應元件也能顯示出其name 屬性,方便我們快速定位程式碼和偵錯。顯示的定義 name 屬性,是個好習慣。

除此之外,如果我們要在<script setup> 顯示定義name 屬性,需要額外新增一個script,也就是:

<script>
  export default {
    name: "MyComponent"
  }
</script>

<script setup>
...
<script>

稍微繁瑣,對此社群推出了unplugin-vue-define-options 來簡化該操作。

使用步驟非常簡單:

1、安裝

npm i unplugin-vue-define-options -D

2、設定vite

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue(), DefineOptions()],
})

3、使用typescript 開發的話,需要設定typescript 支援

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

安裝設定完成後,就能使用其提供的defineOptions API 來定義name 屬性。

<script setup>
defineOptions({
  name: "MyComponent"  
})
<script>

那麼它是如何做到這一點的呢?

對於使用了defineOptions 的程式碼:

<script setup>
import { useSlots } from 'vue'
  
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})
const slots = useSlots()
</script>

#編譯後輸出為:

<script>
export default {
  name: 'Foo',
  inheritAttrs: false,
  props: {
    msg: { type: String, default: 'bar' },
  },
  emits: ['change', 'update'],
}
</script>

<script setup>
const slots = useSlots()
</script>

可以發現,這和我們在上文中書寫2 個script 標籤是一樣的,也就是說,unplugin-vue-define-options 透過vite 插件的方式,在編譯階段幫我們做了寫2 個script 這一步,簡化了我們的開發。

(學習影片分享:web前端開發程式設計基礎影片

以上是聊聊vue3中的name屬性,看看怎麼使用!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除