目录引言使用步骤引言 如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理。 对于 Vue@3.2.
如果你在 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,也就是:
<script>
export default {
name: "MyComponent"
}
</script>
<script setup lang="ts">
...
<script>
稍显繁琐,对此社区推出了 unplugin-vue-define-options
来简化该操作。
npm i unplugin-vue-define-options -D
// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [Vue(), DefineOptions()],
})
// tsconfig.JSON
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-define-options/Macros-global" ]
}
}
安装配置完成后,就能使用其提供的 defineOptions
api 来定义 name 属性。
<script setup lang="ts">
defineOptions({
name: "MyComponent"
})
<script>
那么它是如何做到这一点的呢?
对于使用了 defineOptions
的代码:
<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
name: 'Foo',
inheritAttrs: false,
})
const slots = useSlots()
</script>
编译后输出为:
<script lang="ts">
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
通过 vite 插件的方式,在编译阶段帮我们做了编写 2 个 script 这一步,简化了我们的开发。
以上就是vue3 name 属性的使用技巧详解的详细内容,更多关于vue3 name 属性使用的资料请关注编程网其它相关文章!
--结束END--
本文标题: vue3name属性的使用技巧详解
本文链接: https://www.lsjlt.com/news/167519.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0