Parlons de l'attribut name dans vue3 et voyons comment l'utiliser !

Si vous utilisez la syntaxe <script setup> dans le développement de vue3, vous devez effectuer un traitement supplémentaire pour l'attribut name du composant. L'article suivant vous parlera des compétences d'utilisation de l'attribut de nom vue3. J'espère qu'il vous sera utile !
<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

Pourvue@3.2.34 et supérieur, lors de l'utilisation de <configuration du script> Lors de l'utilisation d'un seul composant de fichier, Vue dérivera automatiquement l'attribut name en fonction du nom du fichier du composant. Autrement dit, pour un fichier nommé MyComponent.vue ou my-component.vue, l'attribut name est MyComponent, et lorsque vous définissez explicitement l'attribut name dans le composant, le nom dérivé sera écrasé. [Recommandations associées : <a href="https://www.php.cn/course/list/18.html" target="_blank" textvalue="tutoriel vidéo vuejs">tutoriel vidéo vuejs</a><a href="https://www.php.cn/course/list/91.html" target="_blank" textvalue="编程基础视频">]</a><blockquote></blockquote>

L'attribut name du composant peut non seulement être utilisé dans <KeepAlive>, mais également lors de l'utilisation du plug-in vuejs-devtools pour déboguer le code, le composant correspondant peut également afficher son attribut name, ce qui est pratique. Nous localisons rapidement le code et débogueons. Définir explicitement l'attribut name est une bonne pratique. 🎜🎜De plus, si nous voulons afficher et définir l'attribut name dans <script setup>, nous devons ajouter un script supplémentaire, à savoir : 🎜rrreee🎜C'est un un peu encombrant, mais cela La communauté a introduit unplugin-vue-define-options pour simplifier cette opération. 🎜🎜Les étapes à utiliser sont très simples : 🎜🎜1. Installez 🎜rrreee🎜2. Configurez vite🎜rrreee🎜3 Si vous utilisez TypeScript pour développer, vous devez configurer la prise en charge de TypeScript 🎜rrreee🎜Une fois l'installation et la configuration terminées. , vous pouvez utiliser le fourni par l'API finishOptions pour définir l'attribut name. 🎜rrreee🎜Alors, comment ça fait ça ? 🎜🎜Pour le code utilisant defineOptions : 🎜rrreee🎜Le résultat compilé est : 🎜rrreee🎜Vous pouvez constater que c'est la même chose que lorsque nous avons écrit 2 balises de script ci-dessus, c'est-à-dire unplugin- vue-define-options Grâce au plug-in vite, cela nous aide à écrire deux scripts pendant la phase de compilation, ce qui simplifie notre développement. 🎜🎜 (Partage de vidéos d'apprentissage : 🎜développement web front-end🎜, 🎜Vidéo de programmation de base🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!