vue3.0 script setup写法组件命名方式

本人移动端开发者一枚，今年由于公司在业务上的变更，从零开始学习了vue以及一系列前端相关的东西，妥妥的开启了新手模式，由于一上手就是vue3.0了，所以碰到的很多问题都很难找到对应的解决方案，接下来就聊聊组件命名这件事情吧。

在vue2.0中想要给组件命名方式很简单，目前网上大部分的教程都是这种方式

<script>
    setup(){
        export default {
            name: 'MyComponentName'
        }
    }
</script>

image.gif

甚至vue3.0中也可以写这种方式，但是如果采用script setup 语法糖的话这种方式就不可行了，原因是它会自动以文件名为主，不需要在写name属性。

<script setup>

</script>

image.gif

由于我这边需要使用keep-alive对页面进行缓存，而include属性必须要指定组件的name才会生效，所以设置name成了不可避免要做的事情。解决方案也很简单，如下代码所示：

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

<script setup>
</script>

直接在script setup同级中再添加一个script即可，这种方式用来解决keep-alive页面缓存问题。

如果同时使用了typescript的话，可以配合插件直接在script标签中设置name，具体方式如下：

安装插件：vite-plugin-vue-setup-extend

然后在script 中直接设置name即可，这样就不用多写一个script脚本了。

<script lang="ts" setup name="xxx">

</script>

image.gif