软件定制开发供应商Vue3中setup语法糖下定义组件的name属性

用Vue3做 递归组件 软件定制开发供应商生成侧边栏菜单时遇到一个问题：
<script setup> 下，软件定制开发供应商无法定义组件的名字，

解决方法1：新增加一个script标签，在这个标签中写入name属性

<script lang="ts">export default {    name: "MyMenuItem",};</script><script lang="ts" setup></script>
1
2
3
4
5
6
7
8

但是写两个script实在太丑了…

---

解决方法2：放弃<script setup> 语法糖，使用

<script lang="ts">  import { defineComponent } from 'vue';  export default defineComponent({    name: 'MyMenuItem',  });</script>
1
2
3
4
5
6
7

这种写法会繁琐一点，需要手动把定义的变量和函数 return出去

---

解决方法3：使用插件unplugin-vue-define-options

Element Plus中都是使用这个插件来对组件名进行注册的

安装

npm install unplugin-vue-define-options -D
1

配置

//vite.config.tsimport { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import DefineOptions from 'unplugin-vue-define-options/vite';export default defineConfig({  plugins: [vue(), DefineOptions()],});
1
2
3
4
5
6
7
8

使用

<script lang="ts" setup>  defineOptions({    name: 'MyMenuItem',  });</script>
1
2
3
4
5

---

可以发现三种方法都挺麻烦的，希望Vue3能改善一下这一点吧~
或者新增一个类似于defineProps 的 defineName 也不错啊~（/狗头保命）

感谢阅读，希望能帮助到大家，
更多前端问题免费咨询，关注我的公众号：简素言也