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="//m.sbmmt.com/course/list/18.html" target="_blank" textvalue="tutoriel vidéo vuejs">tutoriel vidéo vuejs</a><a href="//m.sbmmt.com/course/list/91.html" target="_blank" textvalue="编程基础视频">]</a><blockquote></blockquote>

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!