Vue3如何给组件命名

在使用vue2时，组件命名是非常容易的，

export default{
    name: 'xxx'
}

那么当我们使用vue3的setup模式时，我们该如何给组件命名呢？之前想过重新开一个script就行

<script>
export default {
    name: 'xxx'
}
</script>

<script setup>
// ...
</script>

方法一

但是这样确实让人感觉麻烦，当仔细阅读官方文档就会发现，官方其实提供了defineOptions函数，来实现一些声明式组件的内容,那么我们就能采用以下方式来定义组件名称

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

方法二

当然命名也可以通过vite的插件来解决问题

pnpm i vite-plugin-vue-setup-extend

在vite.config.js里配置

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

...

plugins: [ VueSetupExtend() ]

引入后就能直接在script里定义组件的名称

<script setup name="xxx">  

</script>