Lassen Sie uns über das Namensattribut in vue3 sprechen und sehen, wie man es verwendet!

Wenn Sie die Syntax <script setup> in der Vue3-Entwicklung verwenden, müssen Sie einige zusätzliche Verarbeitungen für das Namensattribut der Komponente durchführen. Der folgende Artikel wird Sie über die Verwendungsfähigkeiten des vue3-Namensattributs informieren. Ich hoffe, er wird Ihnen hilfreich sein!
<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

Fürvue@3.2.34 und höher, bei Verwendung von <script setup> Bei Verwendung einer einzelnen Dateikomponente leitet Vue das Namensattribut automatisch basierend auf dem Dateinamen der Komponente ab. Das heißt, eine Datei namens MyComponent.vue oder my-component.vue, das Namensattribut ist MyComponent, und wenn Sie das Namensattribut explizit in der Komponente definieren, wird der abgeleitete Name überschrieben. [Verwandte Empfehlungen: vuejs Video-Tutorial]

Das Namensattribut der Komponente kann nicht nur in <KeepAlive> verwendet werden, sondern auch bei Verwendung des Plug-ins vuejs-devtools zum Debuggen des Codes der entsprechenden Komponente kann auch sein Namensattribut anzeigen, was praktisch ist. Wir können Code schnell finden und debuggen. Es empfiehlt sich, das Namensattribut explizit zu definieren. 🎜🎜Wenn wir außerdem das Namensattribut in <script setup> anzeigen und definieren möchten, müssen wir ein zusätzliches Skript hinzufügen, nämlich: 🎜rrreee🎜Es ist ein Etwas umständlich, aber das Die Community hat unplugin-vue-define-options eingeführt, um diesen Vorgang zu vereinfachen. 🎜🎜Die zu verwendenden Schritte sind sehr einfach: 🎜🎜1. Installieren Sie 🎜rrreee🎜2. Konfigurieren Sie vite🎜rrreee🎜3. Wenn Sie Typoskript verwenden, müssen Sie die Typoskript-Unterstützung konfigurieren 🎜rrreee🎜Nach Abschluss der Installation und Konfiguration , können Sie die von der API defineOptions bereitgestellte verwenden, um das Namensattribut zu definieren. 🎜rrreee🎜Und wie geht das? 🎜🎜Für Code, der <code>defineOptions verwendet: 🎜rrreee🎜Die kompilierte Ausgabe lautet: 🎜rrreee🎜Sie können feststellen, dass dies dasselbe ist wie beim Schreiben der beiden Skript-Tags oben, d. h. unplugin- vue-define-options Durch das Vite-Plug-In können wir während der Kompilierungsphase zwei Skripte schreiben, was unsere Entwicklung vereinfacht. 🎜🎜 (Teilen von Lernvideos: 🎜Web-Frontend-Entwicklung🎜, 🎜Einfaches Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über das Namensattribut in vue3 sprechen und sehen, wie man es verwendet!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!