vue3 name 属性的使用技巧
如果你在 vue3 开发中使用了 `<script setup>` 语法的话,对于组件的 name 属性,需要做一番额外的处理。
对于 vue@3.2.34 及以上版本,在使用 <script setup>
的单文件组件时,vue 会根据组件文件名,自动推导出 name 属性。也就是名为 MyComponent.vue 或 my-component.vue 的文件, name 属性为 MyComponent,而当你在组件内显示定义 name 属性时,会覆盖推导出的名称。
组件的 name 属性不仅能用于
<KeepAlive>
,而且在使用vuejs-devtools
插件调试代码的时候,对应组件也能显示出其 name 属性,方便我们快速定位代码和调试。显示的定义 name 属性,是一个好习惯。
除此之外,如果我们要在 <script setup>
显示定义 name 属性,需要额外添加一个 script,也就是:
稍显繁琐,对此社区推出了 unplugin-vue-define-options
来简化该操作。
使用步骤非常简单:
安装
配置 vite
使用 typescript 开发的话,需要配置 typescript 支持
安装配置完成后,就能使用其提供的 defineOptions
API 来定义 name 属性。
那么它是如何做到这一点的呢?
对于使用了 defineOptions
的代码:
编译后输出为:
可以发现,这和我们在上文中书写 2 个 script 标签是一样的,也就是说,unplugin-vue-define-options
通过 vite 插件的方式,在编译阶段帮我们做了编写 2 个 script 这一步,简化了我们的开发。
版权声明: 本文为 InfoQ 作者【new_cheng】的原创文章。
原文链接:【http://xie.infoq.cn/article/0a2a068ffe6ca6bf3cfdb88a5】。文章转载请联系作者。
评论