Vue3-42-组件-给组件指定名称 + defineOptions 函数的简单使用

问题说明

当我们在 使用 <script setup> 组合式 API的时候，发现我们并没有给组件指定它的名称。
此时它实际上使用的是 文件的名称 作为组件的名称。
例如 ： 组件文件是 【componentABC.vue】
那么这个组件的默认名称就是 【componentABC】.

现在我们如何显式地为组件指定一个名称呢？
下面就是本文要介绍的解决方案：

解决方案一

在 vue3 中，提供了一个

defineOprions

方法，
此方法可以帮助我们 配置

组件的选项式

属性,例如

name

属性;
而且，这个方法可以直接使用，不需要做任何的引入动作。
下面是代码案例：

文件名称 ：componentABC.vue 

<script setup lang="ts">defineOptions({
       name:'xxxx'// 此时这个组件的名称就是 xxx })</script>

注意

： 这个方法，官方文档显示，只能在

vue 3.3+ 

的版本中使用。

解决方案二

这是个比较通用的解决方案，但是不是很优雅：
就是 再写一个

<script>

标签，通过选项式的方式，指定name属性。
下面是代码案例：

文件名称 ：componentABC.vue 

<script lang="ts">exportdefault{
        name:'cca'}</script><script setup lang="ts">
  。。。
</script>

这种方式就是 会出现多个 script 标签，但是功能上没啥问题。