问题:app开发定制解决中使用setupapp开发定制如何定义组件的name属性
描述:app开发定制这几天在尝试改写基于的组件至vue3版本,app开发定制使用了最新的setup也就是如下这种方式编写组件
<script lang="ts" setup> // ...代码块</script>
- 1
- 2
- 3
由于个人还是比较喜欢Element那种组件注册方式,也就是如下
import TButton from './src/index.vue';TButton.install = (Vue) => { Vue.component(TButton.name, TButton);};export default TButton;
- 1
- 2
- 3
- 4
- 5
- 6
Element的注册方式最主要的就是会将组件的name属性值注册为组件名,这种做法到了vue3的setup后发现,name值…没有了…
解决:解决的方式有几种,博主大致整理了一下:
第一种:新增加一个script标签,在这个标签中写入name属性,代码如下
<template> <button>demo</button></template><script lang="ts">export default { name: "TButton",};</script><script lang="ts" setup></script><style scoped lang="less"></style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
完成就打印确认,发现确实name属性确实被加上去了
第二种:使用一个叫做 “unplugin-vue-define-options” 的插件,这个插件本来确实不知道,有一次在看Element Plus的源码时发现了这个插件,发现在Element Plus中都是使用这个插件来对组件名进行注册的,因此学到了
具体方式如下:
第一步:安装,安装的方式很常规,就是npm的安装
npm install unplugin-vue-define-options -D
- 1
第二步:集成,找到.config.ts文件,加入插件unplugin-vue-define-options(由于我是使用了vite作为配置工具,那么这里就演示vite中的用法)
import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import DefineOptions from 'unplugin-vue-define-options/vite';// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(), DefineOptions()],});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
第三步:集成完成之后,那么可以直接使用了,如果在TypeScript中报错了,那么调整一下就行了,比如在d.ts的配置文件中加入描述
<template> <button> </button></template><script lang="ts" setup> defineOptions({ name: 'TButton', });</script><style scoped></style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
第三种:这种方式其实也是vue3中的,只是它的setup用法是vue3早期的,这种方式其实没有name这个顾虑,可以直接写,这里也列一下吧
<template> <div> </div></template><script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'TButton', });</script><style scoped lang="less"></style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
以上便是发现的在vue3中给组件添加name属性的方式,如果其他有好的方式博主所不知道的,麻烦分享一下,万分感谢~~~