聊聊vue3中的name屬性，看看怎麼使用！

如果你在 vue3 開發中使用了 <script setup> 語法的話，對於元件的 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中文網其他相關文章！