vue3 name 屬性的使用技巧詳解

更新時間：2022年09月14日 11:30:09 作者：new_cheng

這篇文章主要為大家介紹了vue3 name 屬性的使用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

如果你在 vue3 開發(fā)中使用了 <script setup> 語法的話，對于組件的 name 屬性，需要做一番額外的處理。

對于 vue@3.2.34 及以上版本，在使用 <script setup> 的單文件組件時，vue 會根據組件文件名，自動推導出 name 屬性。也就是名為 MyComponent.vue 或 my-component.vue 的文件， name 屬性為 MyComponent，而當你在組件內顯示定義 name 屬性時，會覆蓋推導出的名稱。

組件的 name 屬性不僅能用于 <KeepAlive>，而且在使用 vuejs-devtools 插件調試代碼的時候，對應組件也能顯示出其 name 屬性，方便我們快速定位代碼和調試。顯示的定義 name 屬性，是一個好習慣。

除此之外，如果我們要在 <script setup> 顯示定義 name 屬性，需要額外添加一個 script，也就是：

<script>
  export default {
    name: "MyComponent"
  }
</script>
<script setup lang="ts">
...
<script>

稍顯繁瑣，對此社區(qū)推出了 unplugin-vue-define-options 來簡化該操作。

使用步驟

安裝

npm i unplugin-vue-define-options -D

配置 vite

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [Vue(), DefineOptions()],
})

使用 typescript 開發(fā)的話，需要配置 typescript 支持

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

安裝配置完成后，就能使用其提供的 defineOptions API 來定義 name 屬性。

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

那么它是如何做到這一點的呢？

對于使用了 defineOptions 的代碼：

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

編譯后輸出為：

<script lang="ts">
export default {
  name: 'Foo',
  inheritAttrs: false,
  props: {
    msg: { type: String, default: 'bar' },
  },
  emits: ['change', 'update'],
}
</script>
<script setup>
const slots = useSlots()
</script>

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

以上就是vue3 name 屬性的使用技巧詳解的詳細內容，更多關于vue3 name 屬性使用的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

使用webpack打包后的vue項目如何正確運行（express）
這篇文章主要介紹了使用webpack打包后的vue項目如何正確運行（express） ,接下來通過本文給大家詳細介紹，需要的朋友可以參考下
2018-10-10
vue組件中使用props傳遞數據的實例詳解
這篇文章主要介紹了vue組件中使用props傳遞數據的實例詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-04-04
elementUI多選框反選的實現代碼
這篇文章主要介紹了elementUI多選框反選的實現代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
vue3 reactive函數用法實戰(zhàn)教程
reactive是Vue3中提供實現響應式數據的方法，reactive的用法與ref的用法相似，也是將數據變成響應式數據，當數據發(fā)生變化時UI也會自動更新，這篇文章主要介紹了vue3 reactive函數用法,需要的朋友可以參考下
2022-11-11
Vue響應式原理的示例詳解
Vue 最獨特的特性之一，是非侵入式的響應系統(tǒng)。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。本文將通過示例詳解Vue的響應式原理，感興趣的可以了解一下
2022-03-03
vue 指定文字高亮的實現示例
在做文字處理的項目時經常會遇到搜索文字并高亮的需求,本文就來介紹vue 指定文字高亮的實現示例,具有一定的參考價值,感興趣的可以了解一下
2023-12-12
Vue2項目中Mock.js的完整集成與使用教程
Mock.js 是一個可以在開發(fā)階段模擬后端數據接口的 JavaScript 庫,它能夠生成大量不同類型的隨機數據,并且模擬真實的接口返回,允許前端開發(fā)在沒有真實后端接口的情況下進行開發(fā),本文給大家介紹了Vue2項目中Mock.js的完整集成與使用教程,需要的朋友可以參考下
2025-02-02
Vue偵測相關api的實現方法
這篇文章主要介紹了Vue偵測相關api，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
vue操作dom元素的3種方法示例
這篇文章主要給大家介紹了關于vue操作dom元素的3種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
vue項目創(chuàng)建并引入餓了么elementUI組件的步驟
這篇文章主要介紹了vue項目創(chuàng)建并引入餓了么elementUI組件的步驟，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04