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

NorthCastle2024-01-08 13:18

问题说明

复制代码

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

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

解决方案一

在 vue3 中，提供了一个 defineOprions 方法，

此方法可以帮助我们配置 组件的选项式 属性,例如 name 属性;

而且，这个方法可以直接使用，不需要做任何的引入动作。

下面是代码案例：

ts 复制代码

文件名称 ：componentABC.vue 

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

注意 ：这个方法，官方文档显示，只能在 vue 3.3+ 的版本中使用。

解决方案二

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

就是再写一个 <script> 标签，通过选项式的方式，指定name属性。

下面是代码案例：

ts 复制代码

文件名称 ：componentABC.vue 

<script lang="ts">
    export default {
        name:'cca'
    }
</script>

<script setup lang="ts">
  。。。
</script>

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