vue3如何在 setup 中定义组件的 name 属性

方法一 Options API 中直接定义

首先一笔带过一下我们常用的方式，直接使用 选项式 API (Options API)

<template></template>

<script>
export default {
  name: 'layer',
}
</script>

<style lang="scss" scoped>
</style>

方法二 新增一个script标签

结合方法一，新增一个script标签（Options API），在这个script标签定义一个name属性（多个script使用时 lang的值要一致）

<template></template>

<script setup>
</script>

<script>
export default {
  name: 'layer',
}
</script>

<style lang="scss" scoped>
</style>

方法三 借助unplugin-vue-define-options插件

Element Plus源码也是使用这个插件来对组件名进行注册的
1.安装插件 pnpm i unplugin-vue-define-options -D
2.集成插件 在vite.config.ts文件引入unplugin-vue-define-options

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import DefineOptions from 'unplugin-vue-define-options/vite' // 引入插件

export default defineConfig({
  plugins: [vue(), DefineOptions()],
})

3.在组件中使用defineOptions定义name，注意这个不能和Options API同时使用，会因为（export default）报错

<template></template>

<script setup>
defineOptions({
  name: 'layer',
})
</script>

<style lang="scss" scoped>
</style>

如果是ts项目需要在tsconfig.json中添加一个配置

{
  "compilerOptions": {
    "types": ["unplugin-vue-define-options"]
  }
}

方法四 借助vite-plugin-vue-setup-extend插件

1.安装插件 pnpm i vite-plugin-vue-setup-extend -D
2.集成插件 在vite.config.ts文件引入vite-plugin-vue-setup-extend

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend' // 引入插件

export default defineConfig({
  plugins: [vue(), vueSetupExtend()]
})

3.直接在script标签使用name属性

<template></template>

<script setup name="layer">
</script>

<style lang="scss" scoped>
</style>