Vue3?在＜script?setup＞里設置組件name屬性的方法

更新時間：2023年11月06日 16:37:30 作者：XianZhe_

這篇文章主要介紹了Vue3?在＜script?setup＞里設置組件name屬性的方法,本文通過示例代碼給大家介紹的非常詳細,需要的朋友參考下吧

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

一、Vue組件中 name 的用處

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

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

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

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

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

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

圖 1-1

二、難看但實用的方法

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

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

三、使用第三方插件支持

對于喜歡這種寫法的人來說，可以說是福音，市面上也有很多第三方的組件、插件也存在這種寫法。但這種方法顯然也不是最好的，一是需要額外的打插件操作，二是與 Vue 版本依賴關系大。
第三方插件有很多，在這里推薦一個比較好的插件 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è)務代碼 */
</script>

四、Vue官方解決方法

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

4.1 Vue3.3版本之前

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

安裝插件

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

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

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

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

插件基本配置

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

// 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)報錯的情況，使用 Volar 的可以安裝 @vue-macros/volar插件并配置相關代碼。

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

或則更直接在 .eslintrc.js 里加上下述配置，直接忽略錯誤，當然只是語法檢測層面，程序實際不受影響。

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

使用 defineOptions 編譯宏

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

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

4.2 Vue3.3版本之后

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

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

五、后記

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