vue3name屬性的使用技巧詳解

第vue3name屬性的使用技巧詳解目錄引言使用步驟

引言

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

對(duì)于vue@3.2.34及以上版本，在使用scriptsetup的單文件組件時(shí)，vue會(huì)根據(jù)組件文件名，自動(dòng)推導(dǎo)出name屬性。也就是名為MyComponent.vue或my-component.vue的文件，name屬性為MyComponent，而當(dāng)你在組件內(nèi)顯示定義name屬性時(shí)，會(huì)覆蓋推導(dǎo)出的名稱。

組件的name屬性不僅能用于KeepAlive，而且在使用vuejs-devtools插件調(diào)試代碼的時(shí)候，對(duì)應(yīng)組件也能顯示出其name屬性，方便我們快速定位代碼和調(diào)試。顯示的定義name屬性，是一個(gè)好習(xí)慣。

除此之外，如果我們要在scriptsetup顯示定義name屬性，需要額外添加一個(gè)script，也就是：

script

exportdefault{

name:"MyComponent"

/script

scriptsetuplang="ts"

script

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

使用步驟

npmiunplugin-vue-define-options-D

配置vite

//vite.config.ts

importDefineOptionsfrom'unplugin-vue-define-options/vite'

importVuefrom'@vitejs/plugin-vue'

exportdefaultdefineConfig({

plugins:[Vue(),DefineOptions()],

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

//tsconfig.json

"compilerOptions":{

//...

"types":["unplugin-vue-define-options/macros-global"/*...*/]

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

scriptsetuplang="ts"

defineOptions({

name:"MyComponent"

script

那么它是如何做到這一點(diǎn)的呢？

對(duì)于使用了defineOptions的代碼：

scriptsetuplang="ts"

import{useSlots}from'vue'

defineOptions({

name:'Foo',

inheritAttrs:false,

constslots=useSlots()

/script

編譯后輸出為：

scriptlang="ts"

exportdefault{

name:'Foo',

inheritAttrs:false,

props:{

msg:{type:String,default:'bar'},

emits:['change','update'],

/script

scriptsetup

constslots=useSlots()

/script

可以發(fā)現(xiàn)，這和我們?cè)谏衔闹袝鴮?個(gè)script標(biāo)簽是一樣的，也就是說，unplugin-vue-define-options通過vite插件的方式，在編譯階段幫我們做了編寫2