vue3의 name 속성에 대해 이야기하고 어떻게 사용하는지 알아봅시다!

vue3 개발에서 <script setup> 구문을 사용하는 경우 구성 요소의 이름 속성에 대한 추가 처리가 필요합니다. 다음 기사에서는 vue3 이름 속성의 사용 기술에 대해 설명하겠습니다. 도움이 되길 바랍니다!
<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

vue@3.2.34 이상, <스크립트 설정>을 사용하는 경우 code> 단일 파일 컴포넌트를 사용할 때 Vue는 컴포넌트 파일 이름을 기반으로 이름 속성을 자동으로 파생합니다. 즉, MyComponent.vue 또는 my-comComponent.vue라는 파일의 경우 name 속성은 MyComponent이며, 컴포넌트에 name 속성을 명시적으로 정의하면 파생된 이름을 덮어쓰게 됩니다. [관련 권장사항: <a href="https://www.php.cn/course/list/18.html" target="_blank" textvalue="vuejs 비디오 튜토리얼">vuejs 비디오 튜토리얼</a><a href="https://www.php.cn/course/list/91.html" target="_blank" textvalue="编程基础视频">]</a><blockquote></blockquote>

구성 요소의 이름 속성은 <KeepAlive>뿐만 아니라 vuejs-devtools 플러그인을 사용하여 코드를 디버깅하는 경우에도 사용할 수 있습니다. 또한 이름 속성을 표시할 수 있어 편리합니다. 코드를 빠르게 찾아 디버깅할 수 있습니다. name 속성을 명시적으로 정의하는 것이 좋습니다. 🎜🎜또한 <script setup>에서 name 속성을 표시하고 정의하려면 추가 스크립트를 추가해야 합니다. 즉: 🎜rrreee🎜입니다. 조금 번거롭지만 커뮤니티에서는 이 작업을 단순화하기 위해 unplugin-vue-define-options를 도입했습니다. 🎜🎜사용 단계는 매우 간단합니다. 🎜🎜1. 설치 🎜rrreee🎜2. vite 구성🎜rrreee🎜3 typescript를 사용하여 개발하는 경우 설치 및 구성이 완료된 후 typescript 지원을 구성해야 합니다. , defineOptions API에서 제공하는 를 사용하여 이름 속성을 정의할 수 있습니다. 🎜rrreee🎜그럼 어떻게 하는 걸까요? 🎜🎜<code>defineOptions를 사용하는 코드의 경우: 🎜rrreee🎜컴파일된 출력은 다음과 같습니다. 🎜rrreee🎜위의 두 스크립트 태그, 즉 unplugin을 작성할 때와 동일하다는 것을 알 수 있습니다. -vue-define-options vite 플러그인을 통해 컴파일 단계에서 두 개의 스크립트를 작성하는 데 도움이 되므로 개발이 단순화됩니다. 🎜🎜 (학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 vue3의 name 속성에 대해 이야기하고 어떻게 사용하는지 알아봅시다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!