Vue3 如何在<script setup>里設(shè)置組件name屬性

一、Vue組件中 name 的用處

一般情況，在 <script setup>語法糖下，大多數(shù)人往往將其忽略，畢竟確實(shí)很少用得上 name 屬性，但如果需要用到時(shí)，卻為怎么聲明使用犯起了難，即使 Vue 在默認(rèn)情況下會(huì)將文件名定義為 name 屬性，但文件名是可以重復(fù)的，如出現(xiàn)一大堆 index.vue ，閣下又將如何應(yīng)對呢。
我們先來看看在什么場景下需要使用到 name 屬性，或則說 name 屬性具體能夠做什么，有什么用。

• <keep-alive> 的 include 和 exclude 屬性根據(jù)組件的 name 進(jìn)行匹配，如果想要條件性地被 keep-alive 緩存，就必須顯式聲明一個(gè) name 屬性。

<keep-alive :include="['a', 'b']" :exclude=['c', 'd']>
  <component :is="view" />
</keep-alive>

• 組件遞歸引用自己，在 Vue 組件中只需要引用的組件名稱與當(dāng)前組件 name 屬性保持一直，組件是可以自己引用自己的，這點(diǎn)在編寫類似于 Tree 樹形組件時(shí)十分有用。需要注意的一點(diǎn)是，為避免死循環(huán)遞歸，請帶上條件語句。

<template>
  <my-component v-if="遞歸終止條件" />
</template>
<script lang="ts">
  export default {
    name: "my-component"
  }
</script>

• 在開發(fā)者工具調(diào)試工具中，是以 name 屬性標(biāo)志組件的，在搜索功能上通過 name 名稱能夠快速定位組件方便調(diào)試，同時(shí)合理清晰的組件名稱來講，對于報(bào)錯(cuò)信息也更容易精準(zhǔn)定位。圖中的 index 是依據(jù)文件名稱自動(dòng)推導(dǎo)，在不聲明 name 屬性的情況下，容易發(fā)生重復(fù)現(xiàn)象。

二、難看但實(shí)用的方法

其實(shí)原理很簡單，既然 <script setup> 語法糖里不支持聲明 name 屬性，那就繞一下，Vue 允許同時(shí)包含一個(gè) <script setup> 和一個(gè) <script> 快，那么把 <script setup> 上做不來的事情給 <script> 來做不就行了。
但這個(gè)寫法也有一個(gè)很明顯的特點(diǎn)，那就是丑，對于強(qiáng)迫癥來說完全不能接受，就為了聲明 name 屬性需要額外寫多一個(gè)塊，這顯然是不合理的。

<script lang="ts">
  export default {
    name: "my-component"
  }
</script>
<script lang="ts" setup>
  /* 業(yè)務(wù)代碼 */
</script>

三、使用第三方插件支持

對于喜歡這種寫法的人來說，可以說是福音，市面上也有很多第三方的組件、插件也存在這種寫法。但這種方法顯然也不是最好的，一是需要額外的打插件操作，二是與 Vue 版本依賴關(guān)系大。
第三方插件有很多，在這里推薦一個(gè)比較好的插件 unplugin-vue-setup-extend-plus。

安裝插件

yarn add unplugin-vue-setup-extend-plus
pnpm add unplugin-vue-setup-extend-plus

插件基本配置

// vite.config.ts
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
export default defineConfig({
  plugins: [
    vueSetupExtend()
  ],
})
// vue.config.js
module.exports = defineConfig({
  configureWebpack: {
    plugins: [require('unplugin-vue-setup-extend-plus/webpack').default()],
  }
})

插件基本使用

<template>
</template>
<script lang="ts" setup name="my-component">
  /* 業(yè)務(wù)代碼 */
</script>

四、Vue官方解決方法

使用官方的好處就是不用擔(dān)心其兼容性等問題，Vue官方的解決辦法有點(diǎn)特殊，對于 Vue3.3 版本之前與之后分為兩個(gè)方法，先來說說說 Vue3.3 版本之前需要怎么做。

4.1 Vue3.3版本之前

在 Vue 未正式解決這個(gè)問題之前，需要安裝一個(gè)官方插件來支持額外的語法宏在<script setup>上。

安裝插件

使用包管理工具，安裝一個(gè)名為 unplugin-vue-define-options的插件。

yarn add unplugin-vue-define-options -D
pnpm add unplugin-vue-define-options -D

對于 Volar 的語法檢測，需要再額外安裝一個(gè) @vue-macros/volar 插件，當(dāng)然如果你不使用 Volar 的話，那可以選擇無視。

yarn add @vue-macros/volar -D
pnpm add @vue-macros/volar -D

插件基本配置

需要注意的是，vite 與 vuecli 配置方式不同，請根據(jù)項(xiàng)目各自選擇。

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
export default defineConfig({
  plugins: [DefineOptions()],
})
// vue.config.js
module.exports = defineConfig({
  configureWebpack: {
    plugins: [require('unplugin-vue-define-options/webpack')()],
  }
})

TypeScript 支持配置

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

對于語法檢測，如果出現(xiàn)報(bào)錯(cuò)的情況，使用 Volar 的可以安裝 @vue-macros/volar插件并配置相關(guān)代碼。

// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3, // 或 2.7 用于 Vue 2
    "plugins": [
      "@vue-macros/volar/define-options"
      // ...更多功能
    ]
  }
}

或則更直接在 .eslintrc.js 里加上下述配置，直接忽略錯(cuò)誤，當(dāng)然只是語法檢測層面，程序?qū)嶋H不受影響。

module.exports = {
	globals: {
    defineOptions: "readonly"
  }
}

使用 defineOptions 編譯宏

與 defineProps 編譯宏類似，此時(shí)我們多了一個(gè)可以設(shè)置 name 屬性的編譯宏，只需要傳入?yún)?shù)即可配置心心念念的 name 屬性。

<script lang="ts" setup>
  defineOptions({
    name: "my-component"
  })
	/* 業(yè)務(wù)代碼 */
</script>

4.2 Vue3.3版本之后

在 Vue3.3 版本更新之后，對于這個(gè)問題的解決方案就簡單多了，defineOptions 編譯宏以內(nèi)置支持，不需要再去額外安裝其他插件，直接使用即可。

defineOptions能做的不只是聲明 name 屬性，其功能能做到更多，如是否允許組件 attribute 透傳行為的 inheritAttrs 屬性。

五、后記

對于在 <script setup> 中聲明 name 的問題，其實(shí)老外早就想到且引起了許多的討論，尤雨溪也多次下場，也有人提出以 <script setup name="xxx"> 作為解決方案，但最終采用的是 defineOptions 編譯宏，并在 Vue3.3 版本之后內(nèi)置支持。
對于使用者來說，name 屬性可能有點(diǎn)微不足道，但就是為了實(shí)現(xiàn)這么一個(gè)小小的功能，背后的實(shí)現(xiàn)卻充斥著各位開發(fā)者的努力?? 。

https://github.com/vuejs/core/issues/5218

https://github.com/vuejs/rfcs/discussions/430#discussioncomment-2333745

參考資料??

官方手冊：

• Vue官方文檔 defineOptions
• Vue官方文檔 name
• Vue Macros defineOptions
• Github unplugin-vue-setup-extend-plus

到此這篇關(guān)于Vue3 如何在＜script setup＞里設(shè)置組件name屬性的文章就介紹到這了,更多相關(guān)Vue3 ＜script setup＞設(shè)置組件name屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論